＆＃039; sはCSSを含むプロパティに深く飛び込みます

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

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

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

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

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

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

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

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

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

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

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

sizeが含まれます

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

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

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

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

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

layoutには含まれます

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

もう1つの利点は、コンテナが画面外またはブロックされている場合、関連する計算が優先度を遅らせるか、減少させる可能性があることです。仕様で提供される例は次のとおりです。

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

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

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

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

paintには含まれています

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

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

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

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

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

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

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

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

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

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

パフォーマンスの利点

記事のこの部分を説明するのは困難です。問題は、パフォーマンスの利点に多くの視覚効果がないことです。利点のほとんどは、舞台裏の最適化であり、レイアウトや描画の変更時にブラウザが何をすべきかを決定するのに役立ちます。

contain属性のパフォーマンスの利点を示すために、複数の子要素を持つ要素のフォントサイズを変更する簡単な例を作成しました。この変更は通常、リレーをトリガーし、ページを再描画します。この例では、含まれてnone 、 content 、 strictの値containれています。 （コードの例とパフォーマンステストの結果をここに挿入する必要があります）

レイアウトは1回、2回描画します

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

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

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

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

画像の左側にあるページ領域が強調表示されていることに注意してください。右側には、画面に描かれたサイズがあります。この場合、それはビューポートのほぼサイズです。将来の比較については、レイヤールートとして#documentに注意してください。

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

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

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

通常、最初のイベントでは、紫色の箱を描き、イベントの一部としてそのボックスの寸法を報告します。ボックスは今や独自のレイヤーであり、適用される利点を享受しています。

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

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

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

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

興味深い偶発的な発見

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

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

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

同様のパフォーマンステストを実行し、コンテンツのフォントサイズを変更してリレーアウトと再描画をトリガーします。 2つのテストの結果はほぼ同じです。唯一の違いは、最初のテストのbackground-color透明であり、2番目のテストのbackground-colorが適切な色であることです。数字から、舞台裏の計算はさらに効率的です。プロットイベントのみが異なります。透明なbackground-colorによる図面計算で、要素は独自の層にならないようです。

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

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

要約します

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

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

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

コンテンツを含めてお気軽にお気軽に！

以上が＆＃039; sはCSSを含むプロパティに深く飛び込みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。