CSSOMツリーの深層:なぜ「セレクタの右から左」がブラウザのメモリとCPUを蝕むのか
ブラウザのレンダリングパイプラインを語るとき、私たちはよくDOMの構築やJavaScriptの実行ブロックに気を取られがちだ。しかし、HTMLのパースと並行して、あるいはそれに負けず劣らずシビアなリソース消費を引き起こしている隠れた主役がいる。それが CSSOM(CSS Object Model) である。
画面がピクセルとして描画される遥か手前、CSSの文字列は単なるバイト列からトークン化され、ノードへと変換され、最終的にあの厄介な階層構造――CSSOMツリーへと昇華される。
このプロセスを単なる「デザインを適用するための辞書作り」だと思っているなら、今すぐその認識を改めたほうがいい。大規模なWebアプリケーションにおいて、CSSOMの構築と管理のメカニズムを誤ることは、メモリリークやフレームレートの低下(Jank)を自ら招き入れていると同義なのだから。
今回は、BlinkやWebkitといったモダンブラウザの内部挙動に踏み込み、CSSOMツリーがどのようにメモリ上に構築され、なぜパフォーマンスのボトルネックになり得るのか、そしてプロフェッショナルとしてどう立ち回るべきかを徹底的に解剖しよう。
—
1. 舞台裏の解剖:CSSバイト列からCSSOMツリーへ
ブラウザがネットワーク経由でCSSファイル(あるいは `