レンダーツリー構築の深層：DOMとCSSOMの結婚、そして「見えざるもの」の選別
こんにちは、フロントエンドの深淵を覗くのが趣味のチーフアーキテクトだ。
日頃、ReactやVueといったフレームワークの仮想DOMの差分アルゴリズムに一喜一憂し、「再描画が遅い」「レイアウトシフトが起きる」と嘆いているそこのあなた。少し立ち止まってみよう。
その仮想DOMの下層、ブラウザのC++（Blink, WebKit, Gecko）の心臓部で、何が起きているか正確にイメージできているだろうか？
画面ピクセルを描き出す前の極めて重要なステップ、それが「レンダーツリー（Render Tree）の構築」だ。
今回は、DOMツリーとCSSOMツリーという二つの複雑な構造体がどのように結びつき、いかにして「描画に必要な実体」だけが選別されるのか、その舞台裏のアルゴリズムとメモリ効率の泥臭い現実を解き明かしていく。
—
1. DOMとCSSOMの邂逅：二つの世界線が交わる場所
HTMLパーサーがバイト列を文字にし、トークン化を経て構築するのがDOM（Document Object Model）ツリーだ。こいつは「文書の構造」を完全に保持している。`
コメント