CSS Containmentとcontent-visibilityによるパフォーマンス改善

概要

Chrome85にて実装されたcontent-visibilityプロパティーと、それに関連するCSS Containmentという仕様について調べたメモです.

間違い等ありましたらご指摘いただけると幸いです.

Browser Support

• Chrome 85 ~
• Edge 85 ~

CSS Containment

CSS Containmentとは、描画の改善を目的に、UserAgentに対象のDOMが、他のDOMに影響を与えない事を伝え、レンダリングの最適化を行うための仕様.

仮想DOMのように差分の更新およびレンダリングによる最適化のようなイメージ.
(Containment = 封じ込め の意味から推測できる.)

また、後述のcontent-visibilityプロパティーを使うことで、viewportに含まれたらレンダリングするLazyLoad的な方法での最適化もできる.

CSS Containmentには4つのタイプが存在し、containプロパティーを通してそれらを指定する.

Size Containment

• 子要素の大きさに依らず、そのサイズが分かっている際は、contain: size;を指定することで、その子要素のサイズの計算等を省略することができる.
• contain: sizeを指定して、大きさを指定しなかった場合は0px x 0pxで表示される.
• パフォーマンスにはあまり寄与しない.

Layout Containment (効果大)

• レイアウトの封じ込め.
• 子要素によって他の要素のレイアウトに変更を与えないことが事前にわかっている場合は、content: layout;を指定することで、レイアウト計算を省略できる.

Style Containment

• 子要素内のスタイルの変更が、他の要素にも影響しないことを保証する.
• CSSのカウンターなどは、他の要素に影響を及ぼす例.

Paint Containment (効果大)

• 描画の封じ込め.
• 子要素が、指定された要素の領域外に表示されない場合、描画処理を省略できる.
• positionにabsoluteやfixedを指定された要素のような挙動を取る.
  • 親の要素と同じようには配置されない.
• スタッキングコンテキストになる.
• フォーマティングコンテキストになる.
  • 独立したレイアウト環境として扱われる.

contain

containは上4つのContainmentを複数指定することができる.

contain: paint layout;

contain: content;
// contain: layout style paint;と同じ
 
contain: strict;
// contain: layout style paint size;と同じ

content-visibility

content-visibilityはcontainでやっていたヒューリスティックな作業を、ブラウザ側で自動で識別して改善してくれる.
content-visibilityが指定された要素が完全にviewportに表示されていない(Off-screen状態)ならレイアウト計算を省略し、要素がviewportに含まれた時点で、描画を始める.

content-visibility: hidden;

content-visibility: auto;とは違い、Viewportに含まれても自動で描画してくれなくなる.

display: noneは通常の描画と同じくらいの描画コストがかかる.

visibility: hiddenは表示されないが、完全に要素が消えているわけではなくクリックも可能な状態. また子要素の変更に対して、表示しないにも関わらず描画処理が走る.

content-visibility: hiddenだと、レンダリング状態は保持しつつ、visibleになったときのみ描画処理が走る.

contain-intrinsic-size

Size Containmentのheightをここで指定する.
Off-screen時で描画が省略されている場合は通常そのheightがわからないが、ここで指定することで描画しなくても、スクロールバーが正しく表示される.

まとめ

content-visibility: auto;
contain-intrisic-size: px;

この組み合わせを上手く活用することで、大幅なパフォーマンス改善できることでしょう！（ただしChromium系に限る...）

参考

• Can I use... Support tables for HTML5, CSS3, etc https://caniuse.com/?search=content-visibility

• content-visibility: the new CSS property that boosts your rendering performance https://web.dev/content-visibility/

• Chrome 52 に CSS Containment が導入  |  Web  |  Google Developers https://developers.google.com/web/updates/2016/06/css-containment