Yahooのパフォーマンス改善の話を読んでいて、改善手法のloading属性とcontent-visibilityは知っていたがcontainは知らなかったので調べた
containプロパティは、ブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うようユーザーエージェントに伝えることができる
つまり、動的にコンテンツを生成する場合、その変更がどれくらい他のコンテンツに影響があるかをブラウザに伝えることができる
こちらの記事が参考になった
構文は以下
contain: none | strict | content | [ size || layout || paint ]
strict と content は size、layout、paintの組み合わせで、
strictはsize layout paintcontentはlayout paint
を意味する
sizeとlayoutとpaintはそれぞれ
- size
子孫の寸法を確認する必要なく、その要素の寸法を変更できる - layout
要素の外側が内部のレイアウトなどに影響しない - style
ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしない - paint
子孫要素をその要素の外側に描画しない
