2023年11月28日 CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要 UI開発者 佐竹 Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。 CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。 レンダリングの基本的なフロー CSS Containmentの理解を深めるためにレンダリングについて確認します。 以下のフローはBlin