フロントエンドの現場で、「なぜか妙にスクロールがカクつく」「特定の要素を動かすと、ページ全体の再計算が走って重くなる」という現象に頭を抱えたことはないだろうか？
今日は、そんな泥沼にはまったとき、君のアプリケーションを救う劇薬であり、現代のフロントエンドにおける必須の教養――`contain: layout` について深く語ろうと思う。
—
1. 「ブラウザの再計算」という見えないコスト
ブラウザのレンダリングパイプラインを語る上で避けて通れないのが、「レイアウト（Reflow）」の連鎖だ。DOMツリーの中のたったひとつの要素のサイズが変わるだけで、ブラウザは「影響があるかもしれない」と判断し、ルート要素から深い階層まで再計算を走らせようとする。
通常、ブラウザは非常に賢い。しかし、DOMが数千ノードに膨れ上がった大規模なSPAで、JavaScriptがせっせとスタイルを書き換えているとき、ブラウザは「どこまで影響が出るか完全には予測できない」ため、安全側に倒して広範囲を再計算してしまう。これが、パフォーマンス低下の正体だ。
ここで登場するのが `contain` プロパティだ。「ここの中身は独立しているから、外側に影響は一切与えないよ」と、ブラウザに契約（Contract）を突きつけることができる魔法のCSSだ。
2. contain: layout が裏側でやっていること
`contain: layout` を指定すると、ブラウザはその要素に対して以下のような「制約」を課す。
1. レイアウトの封じ込め: 内部の要素のサイズや位置が変わっても、その要素の外側にある要素のレイアウトには一切影響しない。
2. スタッキングコンテキストの生成: 新しいレイアウトの基準点となり、まるでそこが独立した小さなブラウザ画面であるかのように振る舞う。
簡単に言えば、「この要素の境界線を越えて再計算の波及を止める防火壁」を作っているんだ。ブラウザのレンダリングエンジン（BlinkやWebKit）からすれば、このプロパティを見るだけで「よし、この子の中身が変わっても外の計算はスキップしていいな」と判断できる。これは、JavaScriptで無駄な `offsetWidth` や `offsetHeight` を連打するよりも、遥かに効率的で美しい最適化になる。
3. 実践：現場で使うべき「防波堤」のコード
例えば、頻繁にコンテンツが入れ替わる「ウィジェット」や「サイドバー」など、独立性が高いUIパーツに適用するのが定石だ。
/ 独立性の高いコンポーネントに付与する /
.widget-container {
/ ここが魔法の境界線 /
contain: layout;
/ レイアウトの崩れを防ぐために、適切なサイズ指定を忘れずに /
width: 100%;
min-height: 200px;
overflow: hidden;
/ 視覚的な分離を確実にするため、境界を明確にする /
border: 1px solid #ccc;
}
なぜ `contain: layout` なのか？
単に `overflow: hidden` を使うのと何が違うのか、と疑問に思うかもしれない。`overflow: hidden` はあくまで「表示領域の制限」だが、`contain: layout` は「計算の範囲制限」だ。ブラウザのエンジンが「こいつの中身は外と無関係だ」と明示的に理解できる点が、パフォーマンス上、決定的な差になる。
4. シニアとしてのアドバイス：使いどころを見極めろ
ただし、一つだけ忠告しておく。「とりあえず全部の要素に適用すれば速くなる」という幻想は捨てること。
`contain` を多用しすぎると、ブラウザは「独立した世界」を大量に管理することになり、逆にオーバーヘッドが増える。以下のようなケースで使うのが賢い戦略だ。
- 動的なリスト: ユーザー操作でアイテムが追加・削除されるリストの各行。
- 複雑なウィジェット: グラフやリアルタイムで値が変わるインジケーター。
- モーダルやポップアップ: ページ全体のレイアウトに干渉させたくない独立したUIパーツ。
さらに先へ：`content-visibility`
もし君が Chromium ベースのブラウザを対象にしているなら、`contain-intrinsic-size` と組み合わせた `content-visibility: auto` も調べておくといい。これは「画面外の要素の描画をサボる」という、さらに強力な最適化だ。`contain: layout` はその基礎となる概念だ。
—
最後に：ブラウザと会話する感覚を掴め
ブラウザのレンダリングを最適化するということは、ブラウザという「巨大なエンジン」に、君のコードがどう動くべきかを適切に説明してあげる作業だ。
`contain` を適切に配置することは、ブラウザに対する「ここは俺が責任を持つから、再計算はここまでで止めてくれ」という、信頼の証明のようなものだ。これを使えるようになると、フロントエンドエンジニアとしての「解像度」が一段上がるはずだ。
さあ、ChromeのDevToolsで「Rendering」タブを開いて「Layout Shift Regions」を表示し、自分の書いたコードがどうブラウザを動かしているか、その目で確認してみてほしい。そこにはきっと、今まで見えていなかった「ブラウザの呼吸」が感じられるはずだ。
コメント