CSSOMという名の「目に見えない巨大な重荷」：スタイル解決の裏側と、ブラウザを窒息させないためのアーキテクチャ
こんにちは。日々、プロファイラを開きレイアウトシフトの波形に一喜一憂しているような、フロントエンドの深淵を愛するギークの皆さん。
今回は、ブラウザがHTMLをパースした後に待ち構えている、あの静かなる巨獣――CSSOM（CSS Object Model）ツリーの構築とスタイル解決（Style Resolution）のメカニズムについて、内部アーキテクチャの泥臭い現実も含めて徹底的に解剖していこう。
「CSSを書けば勝手に画面が綺麗になる」なんて思っていたジュニア時代はとうに過ぎ去り、いまや私たちは、数万行に及ぶCSSやコンポーネント指向フレームワークが生み出すカオティックなセレクタの嵐と日々戦っている。ブラウザのレンダリングエンジン（BlinkやWebkit、Gecko）が、裏側でどれほど血のにじむような思いをしてピクセルを画面に焼き付けているか。その実態を知ることは、堅牢でパフォーマンスの高いWebアプリケーションを作る上で、もはや避けて通れない教養なのだ。
—
1. DOMとは違う、「CSSOM」という名のメモリ食いモンスター
HTMLがDOM（Document Object Model）という綺麗なお片付けのできるツリー構造になるのに対し、CSSOMは少し性質が違う。CSSOMは、すべてのスタイルシート（``であれ`