content-visibilityはChromium 85の新しいCSSプロパティを発表しました。これは、サイトでの最初のロードと最初のレンダリングの速度に大きな影響を与えるはずです。さらに、残りのコンテンツが読み込まれるのを待たずに、新しくレンダリングされたコンテンツをすぐに操作できます。content-visibility画面にない要素のマーキングとペイントをスキップするようにユーザーエージェントに強制します。実際、リソースのロードだけでなく、それらのレンダリングでも、レイジーロードのように機能します。
このデモでは
content-visibility: auto、分割コンテンツに適用すると、レンダリング速度が7倍速くなります。
サポート
content-visibilityCSSContainment仕様のプリミティブに基づいています。現在content-visibility、Chromium 85でのみサポートされています（Firefoxでは「プロトタイプ可能」と見なされています）が、Containment仕様はほとんどの最新のブラウザーでサポートされています。
動作原理
CSS Containmentの主な目標は、ページの他の部分からDOMサブツリーを予測可能な方法で分離することにより、Webコンテンツのレンダリングパフォーマンスを向上させることです。
基本的に、開発者はページのどの部分がコンテンツのセットとしてカプセル化されているかをブラウザに伝えることができるため、ブラウザはサブツリーの外部の状態を考慮することなくコンテンツを操作できます。ブラウザは、どのサブツリーに分離されたコンテンツが含まれているかを知ることにより、ページのレンダリングを最適化できます。
CSS包含には4つのタイプがあり、それぞれがCSSプロパティの値として機能し、
contain他のプロパティと組み合わせることができます。
size: , . , , .layout: . , , , .style: , , , (, ). , , , — .paint: . , , . , .
content-visibility
containブラウザの最適化は正しいパラメータのセットでしか機能しないため、
どの値を使用するのが最適か混乱する可能性があります。何が最も効果的かを経験的に見つけるために、値を試してみる価値があります。content-visibility自動チューニングに使用することをお勧めしますcontain。content-visibility: auto最小限の労力で最大限の生産性向上を保証します。
自動モードでは、プロパティはレイアウト、スタイル、ペイントの属性を取得し、要素が画面の端から外れると、サイズを取得して、コンテンツのペイントとチェックを停止します。これは、要素がレンダリング領域を離れるとすぐに、その子孫がレンダリングを停止することを意味します。ブラウザは要素のサイズを認識しますが、レンダリングが必要になるまで他に何もしません。
例-旅行ブログ
通常、旅行ブログには、画像と説明を含むいくつかのストーリーがあります。旅行ブログにアクセスすると、一般的なブラウザで何が起こるかを次に示します。
- ページの一部は、必要なリソースとともにネットワークから読み込まれます
- ブラウザは、表示されているコンテンツと表示されていないコンテンツを区別せずに、すべてのコンテンツをスタイル設定してページに配置します
- すべてのリソースが読み込まれるまで、ブラウザは手順1に進みます
ステップ2で、ブラウザーはコンテンツを処理し、変更を探します。更新の結果として変更された可能性のある要素とともに、新しい要素のスタイルとレイアウトを更新します。これはレンダリングです。時間がかかる。
次に、
content-visibility: auto各ブログ投稿に何を載せるか想像してみましょう。基本的なシステムは同じです。ブラウザはページの一部をダウンロードしてレンダリングします。ただし、ステップ2.Cで実行された作業量の違いcontent-visibilityブラウザは、ユーザーが現在表示しているコンテンツのスタイルを設定して配置します（画面上）。ただし、画面外のストーリーを処理する場合、ブラウザは要素全体のレンダリングをスキップし、コンテナのみをホストします。このページの読み込みパフォーマンスは、画面上の投稿がいっぱいになり、画面外の各投稿のコンテナが空になったようになります。それははるかに速くなり、ロード時間の最大50％を獲得します。この例では、レンダリングが232ミリ秒から30ミリ秒に改善されています。これは、パフォーマンスが7倍向上しています。
これらのメリットを活用するには、何をする必要がありますか？まず、コンテンツをパーツに分割します。
その後、後続のスタイルをパーツに適用します。
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
潜在的な利点を理解
content-visibilityするには、コンテンツのレンダリングが要素の寸法に影響を与えないように、ブラウザでサイズ制限を適用する必要があります。これは、アイテムが空であるかのように配置されることを意味します。要素に高さが定義されていない場合、それはゼロに等しくなります。
幸い、cssには別の機能があり、
contain-intrinsic-siz圧縮されている場合に要素の実際のサイズを判別する機能を提供します。この例では、幅と高さを約1000pxに設定しています。
これは、divがスペースを占有することを保証しながら、単一の「内部サイズ」ファイルがあるかのように配置されることを意味します。
contain-intrinsic-siz .
コンテンツを非表示にする content-visibility: hidden
content-visibility: hiddencontent-visibility: autoオフスクリーンコンテンツで行うことを行います。ただし、autoとは異なり、画面へのコンテンツのレンダリングは自動的には開始されません。
これを、要素のコンテンツを非表示にする通常の方法と比較してください。
- display：none：要素を非表示にし、レンダリング状態を削除します。つまり、アイテムの取得には、新しいアイテムの作成と同じ負荷がかかります。
- 可視性：非表示：要素を非表示にし、レンダリング状態を終了します。要素（およびそのサブツリー）はページ上の幾何学的スペースを占有し、クリックできるため、これによって実際にドキュメントから要素が削除されるわけではありません。また、非表示の場合でも、必要に応じてレンダリング状態を更新します。
content-visibility: hidden一方、レンダリング状態を維持しながら要素を非表示にするため、変更が必要な場合は、要素が画面に表示されている場合にのみ変更が行われます。
結論
content-visibilityまた、CSS Containment Specを使用すると、ベアCSSで、複雑な操作を行うことなく、ページのレンダリングと読み込みを大幅に高速化できます。
CSS封じ込め仕様
MDNドキュメントCSS封じ込め
CSSWGドラフト
次の情報は、資料の準備に使用されました-web.dev/content-visibility
広告
サイトをホストするためのサーバー-それは私たちの叙事詩についてです！「箱から出して」すべてのサーバーは、DDoS攻撃、便利なVestaCPコントロールパネルの自動インストールから保護されます。一度試してみたほうがいいです;）
