【実務・中級編】レンダリングツリーの構築 – Webブラウザの仕組み実践ガイド

ブラウザの「裏の顔」を暴く：DOMとCSSOMが融合するレンダリングツリーの真実

やあ。日々のコーディング、お疲れ様。
「とりあえず動くものができた」という段階を卒業して、なぜブラウザがこれほどまでに重い処理を高速に捌けているのか、その深淵を覗こうという姿勢、実に素晴らしい。

今日は、Webブラウザが画面を描画する前の最重要フェーズ、「レンダリングツリー（Render Tree）の構築」について話をしよう。多くのエンジニアが「HTMLを書けばDOMができる」程度にしか考えていないが、現場でパフォーマンスを極めるには、この「DOMとCSSOMの結婚」の仕組みを知っておく必要がある。

1. 「DOM」と「CSSOM」は、実は別々の生き物だ

まず大前提を整理しよう。ブラウザはHTMLを読み込むと、まずDOMツリーを作る。そしてCSSを読み込むとCSSOM（CSS Object Model）を作る。

DOM (Document Object Model): HTML構造そのもの。ただし、`display: none` な要素も律儀にツリーに含まれる。
CSSOM: スタイルのルールセット。すべてのスタイル規則がどこに適用されるかを解決した巨大な木構造。

この二つが出会うことで初めて、ブラウザは「何を表示して、何を無視するか」を判断できる。これがレンダリングツリーだ。

2. レンダリングツリー構築の「引き算」の哲学

ここが重要なポイントだ。レンダリングツリーは、DOMツリーの単なるコピーではない。

ブラウザはレンダリングツリーを作る際、DOMを上から下へ走査し、以下のノードを容赦なく「切り捨てる」。

1. 表示不要なもの: `display: none` が指定されている要素。
2. メタデータ的なもの: `` 内の要素や `