content-visibility: auto を適用するだけで、画面に見えていない要素はレンダリングしないようになり、速度が改善される。
要素に auto を指定すると、CSS Containment 仕様の layout、style、paint が適用され、その要素が画面外に出ると size も適用される。
→ 画面外に出ると、その要素の子孫はまったく描画されない。
→ 再び画面付近に来ると size は外れ、hit-test が始まる。
contain-intrinsic-size で、デフォルトで描画すべきサイズを指定できる。未指定の場合は 0。
content-visibility: hidden を指定すると、画面外にある場合のようにまったくレンダリングしない。
→ 要素を非表示にし、レンダリングも維持するが、変更が起きた場合は再表示されるときにレンダリングが適用される。
→ display:none - 要素を非表示にし、レンダリング状態を破棄する。つまり再表示時は新しく描き直すのと同じ。
→ visibility:hidden - 要素を非表示にし、レンダリング状態を維持する。実際には文書から削除されず、要素は場所を占有し、クリックも可能。非表示でもレンダリングは継続される状態。
まだコメントはありません。