CSS: content-visibility プロパティ

1. このページの目的

CSS: content-visibility プロパティを試す。

改善したい。

もう少しレンダリングに時間の掛かる処理を一番下に置きたい。

2. メモ

レンダリングが行われないだけで、画像のダウンロードは行われる（ビューポート外の画像をダウンロードするかどうかは、loading 属性で指定する）。
レンダリングのみが省略されても、かかる時間はたいして変わらない。
ファーストビュー外にあるのが画像であれば、それらの画像に loading="lazy" をつけておくことでパフォーマンスを上がるので、content-visibility の必要性は小さいのではないか。

3. 疑問点

content-visibility が効いているのかをどう確認する？
- ➡ DevTools の [パフォーマンス] パネルで確認する。
- ➡ DevTools の [要素] パネル - <body> タグを右クリックして [中断] - [サブツリーの変更] を選択する。これはあくまで「要素」の変更であって、「レンダリング」の変更ではない？
レンダリングに掛かった時間を比較するしかない？
IntersectionObserver API を使い、要素の intersectionRatio を DevTools Console に出力するようにしてあるが、これは「描画された領域かどうか」ではない？
ページ内検索は効くのか？
JavaScript で要素を生成している処理は関係ない？

4. 仕様

CSS Containment Module Level 2

4. 参考

6. デモ

HTML

<div class="demo">Box1
    <img src="animal_happa_tanuki.png">
</div>

<div class="demo">Box2
     <img src="animal_happa_tanuki.png">
</div>

（省略、Box5 まで同じ）

<div class="demo">Box6
    <img src="animal_happa_kitsune.png">
</div>

最後だけ画像が違う。

CSS

.demo {
  (省略)
  content-visibility: auto;
  contain-intrinsic-size: 300px;
  (省略)
}

Box1

Box2

Box3

Box4

Box5

Box6