1. このページの目的
CSS: content-visibility プロパティ を試す。
改善したい。
もう少しレンダリングに時間の掛かる処理を一番下に置きたい。
2. 疑問点
- content-visibility が効いているのかをどう確認する？
- ➡ DevTools の [パフォーマンス] パネルで確認する。
- ➡ DevTools の [要素] パネル - <body> タグを右クリックして [中断] - [サブツリーの変更] を選択する。これはあくまで「要素」の変更であって、「レンダリング」の変更ではない？
- ページ内検索は効くのか？
- JavaScript で要素を生成している処理は関係ない？
3. 仕様
4. 参考
5. デモ
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
