CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要
Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。
CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。
レンダリングの基本的なフロー
CSS Containmentの理解を深めるためにレンダリングについて確認します。
以下のフローはBlinkのレンダリングフローを簡易的にまとめたものです。
- Parsing
- HTMLドキュメントを解析して、DOM（Document Object Model）ツリーを構築します。
- Style
- 外部CSSファイルとスタイル要素の両方にあるスタイルデータを解析します。
- スタイルルールを作成します。
- スタイルルールをカスケード順にプロパティに適用します。
- CSSOM（CSS Object Model）ツリーを構築します。
- Layout（Reflow、配置）
- DOMツリーとCSSOMツリーを結合し、レンダリングツリーを構築します。
- 各ノードの画面に表示される位置やサイズを計算します。
- Painting（描画）
- 各ノードを背景色、背景画像、border、子孫要素、outlineの順に描画します。
詳しくはブラウザの仕組みを参照ください。
containプロパティ
ブラウザがCSSのcontainプロパティの設定によりコンテンツの一部を独立したサブツリーとして認識し、コンテンツをサブツリーとそれ以外の部分に分けます。そして、containプロパティの値(レンダリングのフローに沿った値)からレンダリングの仕方を決定します。
containプロパティの値は以下です。
none
封じ込めを適用しません。
style
包含ブロック内※のスタイルと包含ブロック外のスタイルはそれぞれ独立するため、counter()やquotesなどのブロックを跨いで使用できるようなプロパティでは、包含ブロック外と包含ブロック内とで別の計算になります。
- ※ Containプロパティを設定したブロックを包含ブロックと呼ぶこととします。
size
包含ブロック内の子孫要素のサイズ計算を省略することで包含ブロック要素のサイズが固定されるため、包含ブロックのサイズが包含ブロック外のサイズ計算に影響を与えないようになります。
sizeが指定されたブロック要素は、widthやheight、aspect-ratioなどの明示的なサイズ指定をしない限りサイズは0になります。
layout
包含ブロックは独立した整形コンテキストとなるため、包含ブロックを基準として要素が配置されます。
また重ね合わせコンテキストが構成されます。
paint
包含ブロックは独立した整形コンテキストとなるため、包含ブロックを基準として要素が配置されます。
また重ね合わせコンテキストが構成されます。
包含ブロック内の子孫要素は包含ブロックのpadding領域内でのみ描画され、パッディングの縁（下図参照）を超えた領域では描画されません。そのため包含ブロックがオフスクリーンの位置にある場合や非表示の場合は、包含ブロック内の要素も表示されません。
MDNより引用。
strict
contain: size layout paint の指定と同等です。
content
contain: layout paintの指定と同等です。
containプロパティのブラウザの互換性
| Edge | Firefox | Chrome | Safari |
|---|---|---|---|
| ○ | ○ | ○ | ○ |
content-visibilityプロパティ
ブラウザがCSSのcontent-visibilityプロパティの値からレンダリングの制御を決定します。
content-visibilityプロパティの値は以下です。
visible
通常通りのレンダリングになります。
hidden
レンダリングがスキップされます。
フォーカスや選択が不可能になります。
auto
レンダリングのStyle、Layout、Paintの封じ込めが有効になります。
必要になるまでレンダリングを遅延します。
フォーカスや選択は可能になります。
content-visibilityプロパティのブラウザの互換性
| Edge | Firefox | Chrome | Safari |
|---|---|---|---|
| ○ | ✗ | ○ | TP |
- ※ 対応ブラウザはBlog作成時点のものになります。
次回以降のBlogでCSS Containmentの検証をご紹介します。