お疲れ様！日々のフロントエンド開発、楽しんでいるかな？
VueやReact、Next.jsといったモダンなフレームワークを使っていると、私たちは「状態（State）」を更新するだけで、画面が魔法のように書き換わる恩恵に預かることができる。だけど、その「魔法」の裏側で、ブラウザがどれほど泥臭く、そして極限まで洗練された処理を行っているか、意識したことはあるかい？
今回は、ブラウザレンダリングの心臓部でありながら、意外とブラックボックスになりがちな「レンダーツリー（Render Tree）の構築」にスポットを当ててみよう。
「DOMとCSSOMが合体するんでしょ？」という教科書通りの知識から一歩踏み込んで、「なぜ `display: none` と `visibility: hidden` でブラウザの挙動が劇的に変わるのか」「どうして疑似要素（`::before`）は画面に映るのか」といった、実務のパフォーマンスチューニングに直結するディープな領域まで、ブラウザエンジンの気持ちになって解説するよ。
さあ、温かいコーヒーでも飲みながら、ブラウザの裏側を一緒に覗いてみよう！
—
1. レンダーツリー構築とは：DOMとCSSOMの「お見合い」
ブラウザがHTMLを解析して作った DOM（Document Object Model） と、CSSを解析して作った CSSOM（CSS Object Model）。これらは、作られた時点ではまだ「お互いの存在を知らない」独立したツリー構造なんだ。
この2つをガッチャンコして、「実際に画面に描画する必要がある要素だけ」を集めた第3のツリーを作るプロセス、これこそがレンダーツリーの構築（Attachment / アタッチメント）だ。
[ HTML ] —> DOM Tree ──┐
├─ (Attachment) ─> [ Render Tree ] ─> Layout ─> Paint
[ CSS ] —> CSSOM Tree ─┘
ブラウザ（例えばChromeのレンダリングエンジン「Blink」や、Safariの「WebKit」）は、DOMツリーのルート（根っこ）から1ノードずつトラバース（走査）していき、対応するCSSOMのスタイルルールをマッチングさせていく。
ここで超重要なのは、「DOMツリーのノードと、レンダーツリーのノード（RenderObject / LayoutObject）は、1対1で対応するとは限らない」という事実なんだ。
—
2. 【深掘り】何がツリーに残り、何が消え去るのか？
ここがフロントエンドのパフォーマンスを左右する、もっとも面白いところだ。
ブラウザは、画面に描画する「価値」があるノードだけを厳選してレンダーツリーに登録する。具体的なルールを見てみよう。
① そもそもレンダーツリーに入らない「非表示」の面々
- `` や `
コメント