CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要

UI開発者 佐竹

Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。

CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。

レンダリングの基本的なフロー

CSS Containmentの理解を深めるためにレンダリングについて確認します。

以下のフローはBlinkのレンダリングフローを簡易的にまとめたものです。

  1. Parsing
  2. Style
    • 外部CSSファイルとスタイル要素の両方にあるスタイルデータを解析します。
    • スタイルルールを作成します。
    • スタイルルールをカスケード順にプロパティに適用します。
    • CSSOM(CSS Object Model)ツリーを構築します。
  3. Layout(Reflow、配置)
    • DOMツリーとCSSOMツリーを結合し、レンダリングツリーを構築します。
    • 各ノードの画面に表示される位置やサイズを計算します。
  4. Painting(描画)
    • 各ノードを背景色、背景画像、border、子孫要素、outlineの順に描画します。

詳しくはブラウザの仕組みを参照ください。

containプロパティ

ブラウザがCSSのcontainプロパティの設定によりコンテンツの一部を独立したサブツリーとして認識し、コンテンツをサブツリーとそれ以外の部分に分けます。そして、containプロパティの値(レンダリングのフローに沿った値)からレンダリングの仕方を決定します。

containプロパティの値は以下です。

none

封じ込めを適用しません。

style

包含ブロック内のスタイルと包含ブロック外のスタイルはそれぞれ独立するため、counter()quotesなどのブロックを跨いで使用できるようなプロパティでは、包含ブロック外と包含ブロック内とで別の計算になります。

  • Containプロパティを設定したブロックを包含ブロックと呼ぶこととします。

size

包含ブロック内の子孫要素のサイズ計算を省略することで包含ブロック要素のサイズが固定されるため、包含ブロックのサイズが包含ブロック外のサイズ計算に影響を与えないようになります。

sizeが指定されたブロック要素は、widthheightaspect-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