レンダリング性能が約7倍に上がるCSSのたたか2行！

くだらない話は抜きにして、パフォーマンスを約7倍改善するために追加するべきCSSがこちら：

{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

出る

これが必要な理由は？

今日のウェブサイトは最適で性能が良い必要があります。ウェブのユーザーは非常に注意が散漫です。ドハーティ閾値によると応答時間は400ミリ秒です。

例えばFacebookやInstagramなどのウェブサイトがこの閾値を超えてロードに時間がかかったら？誰もこれらのサイトに戻ってはこないでしょう。

いつこれを使うの？

この機能が最も一般的に使われるケースは、アプリケーションのマウント時に大量のリスト・グリッドデータをレンダリングする必要がある場合です。

例：静的なウェブサイトやスペック、ドキュメント、旅行ブログなど...

他にも使い道があればコメントで教えてくださいね。

どのように機能するの？

ブラウザーは賢く、content-visibility: autoを適用したクラスのレンダリング処理をスキップします。

ブラウザーはDOMのレイアウトを知る必要がありますが、ビューポート内にない要素はレンダリングされず、実際にはあなたが指定したcontain-intrinsic-sizeで空のボックスになります。

要するに、すべてのレンダリングはビューポートに到達するまで保留され、そのときにブラウザーは指定された幅、高さ、スタイルで実際のレイアウトを描画します。

P.S: ビューポート外のレイアウトはheight: 0になっていますから、保留されていたレイアウトがビューポートに来ると、それぞれ積み重なる形で表示されます。そのためにcontain-intrinsic-sizeが必要です。でも心配しないで、これらはただのフォールバック値で、ビューポート内でレンダリングされるときにはブラウザーが実際の値を描画します。

よって一つの欠点は、contain-intrinsic-sizeが正しく指定されていない場合はスクロールバーが不安定になり、飛び跳ねることがあります。:)

ブラウザーサポート

content-visibilityはCSS Containment Specに基づいています。書いている現在は主にクロミウム技術でサポートされています。

でも、content-visibilityのサポートは、高性能なシステムで望ましい機能に対してそんなに悪くないですし、進行するウェブ開発と共にすぐにすべてのブラウザでサポートされることでしょう。 たぶんね :)

代わりになるもの

パフォーマンスを改善するためのJavaScriptを使用した代替手段があります。例えばList virtualizationですが、数百行のjsを書いて維持するより、2行 のcssでできた方がいいですよね。

jsでできるさらなる情報:
react-window
react-virtualized

素晴らしいデモと説明

さらに読むために:

https://web.dev/content-visibility/#support
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

よろしくお願いします。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd