最新のブラウザは、複雑なHTML、CSS、およびJavaScriptコードのWebページのレンダリングにおいて、わずか數(shù)ミリ秒で利用可能なページにコードを変換するのに大幅に効率的です。

それでは、フロントエンドの開(kāi)発者がブラウザのレンダリング速度をさらに向上させるにはどうすればよいですか？ CSSセレクターの合理化、HTML構(gòu)造をフラットに保ち、JavaScriptのHTMLとCSSを操作するように注意するなど、簡(jiǎn)単に忘れられるベストプラクティスに加えて（特に生成されたコードの制御が制限されている場(chǎng)合）、CSSのcontain特性を活用することもできます。

containプロパティにより、開(kāi)発者は要素とそのコンテンツがどの程度のドキュメントツリーとは獨(dú)立しているかを指定できます。これにより、ブラウザはレイアウト、スタイル、図面、サイズ、またはそれらの任意の組み合わせを再計(jì)算することができ、DOMの限られた領(lǐng)域（ページ全體ではなく）のみの組み合わせが可能になり、パフォーマンスが大幅に改善されます。

簡(jiǎn)単に言えば、 contain屬性は、コンテンツが動(dòng)的であっても、コンテンツを含むコンテナ要素であるページ上の要素間の関係に関するブラウザにプロンプ??トを提供できます。たとえば、シングルページアプリケーション（SPA）では、多くの場(chǎng)合、ページ上の他のコンテンツとは無(wú)関係に、ページに動(dòng)的なコンテンツが挿入され、削除されます。

ブラウザは、JavaScriptの挿入とページコンテンツの削除から生じる可能性のある將來(lái)のレイアウトの変更を予測(cè)することはできません。要素にクラス名を追加したり、DOM要素をアニメーション化したり、要素サイズを取得したりするなどの単純な操作でさえ、ページの再配置と再描畫(huà)につながる可能性があります。

開(kāi)発者は、ページデザインのユーザーエクスペリエンスに基づいて、可能な將來(lái)の変更を予測(cè)できます。たとえば、ユーザーがボタンをクリックすると、現(xiàn)在のビューのコールデータがDIV要素に挿入されます。これは可能であることはわかっていますが、ブラウザはそうではありません。また、データをDIV要素に挿入することで、ページ上の他の要素の視覚効果や他の側(cè)面が変更されない可能性が高いこともわかっています。

ブラウザ開(kāi)発者は、この狀況を処理するためにブラウザの最適化に多くの時(shí)間を費(fèi)やしてきました。ブラウザがこの狀況をより効率的に処理するのに役立つさまざまな方法がありますが、より直接的なヒントがより役立つ可能性があります。 containプロパティは、これらのヒントを提供する方法を提供します。

contain屬性のさまざまな使用法

contain屬性には3つの値があり、単獨(dú)でまたは組み合わせて使用??できます： size 、 layout 、 paint 。また、共通の組み合わせの2つの略語(yǔ)値があります： strictとcontent 。各値の意味を理解しましょう。

各値の多くのルールとエッジケースが仕様でカバーされていることに注意する必要があります。ほとんどの場(chǎng)合、これらのルールはあまり注目を集めないかもしれません。ただし、予期しない結(jié)果が得られた場(chǎng)合、仕様をすばやく見(jiàn)ると役立つ場(chǎng)合があります。

この記事では紹介されない仕様にタイプを含むスタイルもあります。その理由は、現(xiàn)在のスタイルインクルージョンタイプはほとんど価値がないと見(jiàn)なされ、現(xiàn)在仕様から削除されるリスクがあるためです。

sizeが含まれます

sizeが含まれているのは簡(jiǎn)単に説明できます。これを含むコンテナにレイアウト計(jì)算に參加する場(chǎng)合、ブラウザはコンテナの子要素を無(wú)視するため、計(jì)算のかなりの部分をスキップできます。コンテナには、高さと幅が設(shè)定されていると予想されます。それ以外の場(chǎng)合、それは崩壊し、それがページレイアウトで考慮すべき唯一の要因です。それは何も持っていないと考えられています。

子の要素は、容器のスタイルに応じて、コンテナのサイズに影響を與える可能性があることに注意してください。これは、レイアウトを計(jì)算するときに考慮する必要があります。 sizeインクルージョンを使用すると、考慮されない可能性があります。コンテナがページサイズに対して決定されると、子要素のレイアウトが計(jì)算されます。

size包含自體は、あまり最適化されません。通常、他の値と組み合わせて使用??されます。

ただし、提供できる利點(diǎn)の1つは、コンテナクエリタイプなどのコンテナサイズに基づいてコンテナの子要素を変更するJavaScriptに対処するのに役立つことです。場(chǎng)合によっては、容器のサイズに応じて子要素を変更すると、子要素を変更した後に容器がサイズを変更する可能性があります。コンテナサイズの変更は、子要素の別の変更をトリガーする可能性があるため、変更ループになってしまう可能性があります。 sizeには、このループを防ぐのに役立ちます。

このサイズsizeループの概念に関する完全に人工的な例を次に示します。（コードの例をここに挿入する必要があります。

layoutには含まれます

layoutは、外部要素がコンテナ要素の內(nèi)部レイアウトに影響しないことをブラウザに伝えるレイアウトが含まれており、コンテナ要素の內(nèi)部レイアウトには外部要素に影響することもありません。したがって、ブラウザがレイアウト計(jì)算を行う場(chǎng)合、 layoutに含まれるさまざまな要素を持つことは他の要素に影響しないと仮定できます。これにより、実行する必要がある計(jì)算量を減らすことができます。

もう1つの利點(diǎn)は、コンテナが畫(huà)面外またはブロックされている場(chǎng)合、関連する計(jì)算が優(yōu)先度を遅らせるか、減少させる可能性があることです。仕様で提供される例は次のとおりです。

[…]たとえば、含まれるボックスがブロックコンテナの端近くにある場(chǎng)合、ブロックコンテナの先頭を見(jiàn)ている場(chǎng)合

layoutを含むコンテナは、絶対または固定位置の子要素のブロックを含むようになります。これは、コンテナに相対位置を適用するのと同じです。したがって、このタイプのインクルージョンを適用するときに、コンテナの子要素に影響を與える方法を忘れないでください。

同様に、コンテナは新しいスタッキングコンテキストを取得するため、アプリケーションが相対、絶対、または固定であるのと同じ方法でz-indexが使用されます。ただし、 top 、 right 、 bottom 、またはleft屬性を設(shè)定しても、コンテナには影響しません。

ここに簡(jiǎn)単な例があります：（ここにコードの例を挿入する必要がありますlayoutどのように含まれているかを示すレイアウトとスタッキングのコンテキストに影響を與えます）

paintには含まれています

paintには、コンテナの子要素がコンテナボックスのサイズの境界の外側(cè)に描かれないことをブラウザに伝えることが含まれています。これはoverflow: hidden;コンテナの上にありますが、いくつかの違いがあります。

まず、コンテナはlayoutインクルージョンの下にあるのと同じ方法で処理されます。獨(dú)自のスタッキングコンテキストを備えたコンテンディングブロックになります。したがって、 paintに配置された子要素には、位置の観點(diǎn)から容器を尊重することが含まれます。上記のlayoutをコピーする必要があるが、デモを含むが、代わりにpaintを使用する場(chǎng)合、結(jié)果はほぼ同じになります。違いは、アプリケーションが含まれている場(chǎng)合、紫色のラインはコンテナにオーバーフローせず、容器の境界でクリップされることです。

paintのもう1つの興味深い利點(diǎn)には、ブラウザがコンテナ自體がビューポートで表示されていないことを検出できる場(chǎng)合、その要素の子要素の描畫(huà)計(jì)算をスキップできることです。コンテナがビューポートにないか、何らかの方法で妨害されている場(chǎng)合、その子供は見(jiàn)えないことが保証されます。たとえば、ページの左側(cè)にある畫(huà)面から外側(cè)にあるナビゲーションメニューを考えてみましょう。ボタンがクリックされるとスライドします。メニューが通常の畫(huà)面外の狀態(tài)にある場(chǎng)合、ブラウザは単にそのコンテンツを描畫(huà)しようとしてスキップします。

含まれるさまざまな組み合わせ

これらの3つには、ブラウザによって実行されるレンダリング計(jì)算に影響するさまざまな方法が含まれています。 sizeには、このコンテナがコンテンツが変更されたときにページに位置をオフセットしないようにするべきではないことをブラウザに伝えることが含まれています。 layoutは、このコンテナの子要素がコンテナの外側(cè)の要素のレイアウトの変更を引き起こすことはないことをブラウザに伝えることが含まれています。その逆も同様です。 paintには、この容器の內(nèi)容がコンテナサイズの外側(cè)に描かれないこと、コンテナがブロックされている場(chǎng)合、內(nèi)容がまったく描かれないことをブラウザに伝えることが含まれています。

それぞれが異なる最適化を提供するため、インクルードの一部を一緒に組み合わせることは理にかなっています。仕様は実際にこれを許可します。たとえば、 layoutとpaint containすることができます。

 .el {
  含まれる：レイアウトペイント。
}

これは非常に明白なことであるため、仕様は実際に2つの略語(yǔ)値を提供します。

content値は、Webプロジェクトで最も一般的に使用される値となり、時(shí)間の経過(guò)とともにコンテンツを変更する大きな複數(shù)のコンテナやユーザーアクティビティなど、多くの動(dòng)的要素が含まれます。

strict値は、サイズが変更されない定義されたサイズのコンテナに役立ちます（コンテンツが変更されても）。一度配置されると、予想されるサイズが維持されます。簡(jiǎn)単な例は、サードパーティの外部広告コンテンツを含むDIVで、その寸法は業(yè)界によって定義されており、ページ上の他のDOM要素とは何の関係もありません。

パフォーマンスの利點(diǎn)

記事のこの部分を説明するのは困難です。問(wèn)題は、パフォーマンスの利點(diǎn)に多くの視覚効果がないことです。利點(diǎn)のほとんどは、舞臺(tái)裏の最適化であり、レイアウトや描畫(huà)の変更時(shí)にブラウザが何をすべきかを決定するのに役立ちます。

contain屬性のパフォーマンスの利點(diǎn)を示すために、複數(shù)の子要素を持つ要素のフォントサイズを変更する簡(jiǎn)単な例を作成しました。この変更は通常、リレーをトリガーし、ページを再描畫(huà)します。この例では、含まれてnone 、 content 、 strictの値containれています。 （コードの例とパフォーマンステストの結(jié)果をここに挿入する必要があります）

レイアウトは1回、2回描畫(huà)します

私の説明を辛抱強(qiáng)く聞いてください。私はそれが理にかなっていると約束します。

上記のデモを次の説明の基礎(chǔ)として使用します。學(xué)習(xí)を続けたい場(chǎng)合は、デモとオープンDevtoolsのフルバージョンにアクセスしてください。パフォーマンスツールを?qū)g行した後、「メイン」タイムラインの代わりに「フレーム」の詳細(xì)をオンにする必要があることに注意してください。

DevToolsはそのバージョンでよりよく機(jī)能するため、「FullPage」バージョンのスクリーンショットを?qū)g際に撮影しています。とはいえ、「Full」の通常のバージョンはほぼ同じアイデアを提供するはずです。

含まれていないタスクのイベントログでは、描畫(huà)イベントは一度だけトリガーされます。通常、イベントは0.2ミリ秒から3.6ミリ秒までの範(fàn)囲で長(zhǎng)すぎません。より深い詳細(xì)は、それが興味深い場(chǎng)所です。これらの詳細(xì)では、図面領(lǐng)域がページ全體であると述べています。イベントログでは、DevToolsは、描畫(huà)イベントの上にホバリングする場(chǎng)合、描畫(huà)されたページ領(lǐng)域を強(qiáng)調(diào)します。この場(chǎng)合、サイズはブラウザビューポートのサイズになります。また、描畫(huà)されたレイヤールートにも気付きます。

畫(huà)像の左側(cè)にあるページ領(lǐng)域が強(qiáng)調(diào)表示されていることに注意してください。右側(cè)には、畫(huà)面に描かれたサイズがあります。この場(chǎng)合、それはビューポートのほぼサイズです。將來(lái)の比較については、レイヤールートとして#documentに注意してください。

ブラウザには、描畫(huà)に役立つ特定の要素のレイヤー概念があることを忘れないでください。レイヤーは、新しいスタッキングコンテキストのために互いに重複する可能性のある要素によく使用されます。例はposition: relative;およびz-index: 1;要素には、ブラウザが新しいレイヤーとして要素を作成します。 containプロパティには同じ効果があります。

devtoolsには、「レンダリング」と呼ばれるセクションがあり、ブラウザがページをレンダリングする方法を確認(rèn)するためのさまざまなツールを提供します。 「レイヤーボーダー」と呼ばれるチェックボックスを選択すると、包含に応じて異なる內(nèi)容が表示されます。含まれてnone場(chǎng)合、典型的な靜的Webページレイヤーを超えたレイヤーが表示されないはずです。 contentまたはstrict選択をすると、紫色のボックスが獨(dú)自のレイヤーに変換され、ページの殘りがそれに応じて変化することがわかります。 （ここにスクリーンショットを挿入して、さまざまな包含タイプの下のレイヤーを表示する必要があります）

前に述べたように、 contentとstrict両方により、ドローイベントが2回発射されます。これは、2つの異なる理由で2つの異なる描畫(huà)プロセスが実行されるためです。私のデモでは、最初のイベントはパープルボックス用で、2番目のイベントはパープルボックスの內(nèi)容です。

通常、最初のイベントでは、紫色の箱を描き、イベントの一部としてそのボックスの寸法を報(bào)告します。ボックスは今や獨(dú)自のレイヤーであり、適用される利點(diǎn)を享受しています。

2番目のイベントは、要素をスクロールしているため、ボックスのコンテンツに使用されます。仕様が説明するように。スタッキングコンテキストが保証されているため、スクロール要素を単一のGPUレイヤーに引き込むことができます。 2番目のイベントで報(bào)告されたより高いサイズは、スクロール要素の高さです。おそらく、スクロールバーのためのスペースを作るためにさらに狹くなります。

これら2つの畫(huà)像の右側(cè)の寸法の違いに注意してください。さらに、両方のイベントのレイヤールートは、上記の#documentの代わりにmain.changeです。紫色のボックスは主な要素であるため、ドキュメント全體の代わりにその要素のみが描畫(huà)されます。ページ全體ではなく、強(qiáng)調(diào)表示されているボックスを見(jiàn)ることができます。

これの利點(diǎn)は、スクロール要素が通常、視野に入るときに描畫(huà)されるように作られることです。封じ込めのスクロール要素が描かれているため、視野に入るときに再び描畫(huà)する必要はありません。そのため、いくつかのローリングの最適化も取得されます。

繰り返しますが、これはデモで見(jiàn)ることができます。 （ここにスクリーンショットを挿入して、さまざまなインクルージョンタイプの下でスクロールパフォーマンスを表示する必要があります）

興味深い偶発的な発見(jiàn)

上記のデモを試してみて、描畫(huà)とスクロールのパフォーマンスの側(cè)面がどのように機(jī)能するかを理解したとき、私は興味深い問(wèn)題を抱えていました。あるテストでは、ページの中央にシンプルなボックスがありますが、スタイルは最小限です。これは、本質(zhì)的に多くのテキストコンテンツを備えたスクロール要素です。コンテナの要素に內(nèi)容を適用しましたが、上記のスクロールパフォーマンスの利點(diǎn)はわかりませんでした。

コンテナには「スクロール上の塗り替え」オーバーレイが付いており、描畫(huà)フリッカーは、コンテンツが含まれていることが実際にコンテナに適用されていることを知っていても、含まれていない場(chǎng)合と同じです。そこで、私の簡(jiǎn)単なテストを上記のよりスタイリングが豊富なバージョンと比較し始めました。

最終的に、コンテナのbackground-colorが透明である場(chǎng)合、スクロールのパフォーマンスの利點(diǎn)が含まれていないことを発見(jiàn)しました。

同様のパフォーマンステストを?qū)g行し、コンテンツのフォントサイズを変更してリレーアウトと再描畫(huà)をトリガーします。 2つのテストの結(jié)果はほぼ同じです。唯一の違いは、最初のテストのbackground-color透明であり、2番目のテストのbackground-colorが適切な色であることです。數(shù)字から、舞臺(tái)裏の計(jì)算はさらに効率的です。プロットイベントのみが異なります。透明なbackground-colorによる図面計(jì)算で、要素は獨(dú)自の層にならないようです。

最初のテスト実行には、イベントログに1つの抽選イベントのみがあります。 2回目のテスト実行には、予想されたように2つのプロットイベントがあります。その背景色がなければ、ブラウザは含まれているレイヤーの側(cè)面をスキップすることにしたようです。要素の背後にあるものと同じ色を使用することで透明性を築くことでも正常に機(jī)能することもわかりました。私の推測(cè)では、容器の背景が透明である場(chǎng)合、以下のものに依存する必要があるため、コンテナを獨(dú)自の描畫(huà)層に分離することは不可能です。 （透明な背景色と不透明な背景色の下でさまざまな結(jié)果を示すために、スクリーンショットをここに挿入する必要があります）

コンテナ要素のbackground-color透明から體の背景色と同じ色に変更する別のバージョンのテストデモを作成しました。 DevToolsの「レンダリング」パネルでさまざまなオプションを使用する2つのスクリーンショットを次に示します。 （透明な背景色と不透明な背景色の下でさまざまな結(jié)果を示すために、スクリーンショットをここに挿入する必要があります）

要約します

この記事では、CSSの基本には、その価値、利點(diǎn)、潛在的なパフォーマンスの改善など、プロパティcontain 。 HTMLの特定の要素にこの屬性を適用することには、いくつかの利點(diǎn)があります。この屬性を適用するために必要な要素はあなた次第です。少なくとも、それは私が理解していることです。なぜなら、私は特定のガイダンスを知らないからです。一般的なアイデアは、他の要素、特に動(dòng)的な側(cè)面を持つ要素の容器に適用することです。

いくつかの考えられるシナリオ：CSSグリッドのグリッド領(lǐng)域、サードパーティのコンテンツを含む要素、およびユーザーインタラクションに基づいた動(dòng)的コンテンツを備えたコンテナ。これらの場(chǎng)合にこのプロパティを使用することに害はありません。これは、その外側(cè)の別の要素に実際に依存する要素を含めようとしていないと仮定します。

ブラウザのサポートは非??常に強(qiáng)力です。 Safariは、現(xiàn)在サポートされていない唯一のブラウザです。とにかく、ブラウザがプロパティやその値を理解していない場(chǎng)合、エラーなしでコードをスキップするだけなので、プロパティを使用できます。

コンテンツを含めてお?dú)葺Xにお?dú)葺Xに！

以上が＆＃039; sはCSSを含むプロパティに深く飛び込みますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。