【テクニカル・上級編】レンダリングツリーの構築 – Webブラウザの仕組み実践ガイド

レンダリングツリーの深淵：DOMとCSSOMが交差する瞬間の最適化

フロントエンドの世界で「レンダリングが遅い」と嘆くとき、多くのエンジニアは「不要な再レンダリング」や「重いJS」に目を向けがちだ。しかし、ブラウザの心臓部で起きている「Render Tree（レンダリングツリー）の構築」という、極めてシビアなメモリとCPUのダンスを理解している者は驚くほど少ない。

DOMは「ドキュメントの構造」であり、CSSOMは「スタイルの系譜」だ。ブラウザがこの二つを結合し、画面に描画すべきノードだけを抽出するプロセス――こここそが、Webアプリケーションのパフォーマンスを左右する真の戦場である。

1. 「表示すべきもの」だけを抽出する冷徹な選別

DOMツリーが完成し、CSSOMツリーが計算された後、ブラウザは「Render Tree」を構築する。ここで重要なのは、DOMに含まれる全てのノードがRender Treeに乗るわけではないという事実だ。

例えば、`display: none;` が指定された要素や、`