ブラウザのレンダリングエンジンは、単なる「表示器」ではない。それは、複雑怪奇なWebの設計図を、ミリ秒単位の死闘の末にピクセルへ変換する、極めて高度な並列計算機だ。
多くのエンジニアは「描画が遅い」と感じたとき、DOMの深さやCSSの計算量に目を向ける。だが、真のパフォーマンスのボトルネックは、その先の「コンポジット（合成）フェーズ」に隠れていることが多い。なぜGPUが泣き叫ぶのか、なぜメモリが溶けるのか。その深淵を覗いてみよう。
—
1. コンポジットレイヤー：ブラウザの「見えない層」
ブラウザは画面を描画する際、全てを一つのキャンバスに描くわけではない。特定の条件を満たした要素を独立した「レイヤー（Compositing Layer）」として切り出し、GPUのテクスチャとしてアップロードする。
この「レイヤー化」は強力な武器だ。一度レイヤー化してしまえば、その要素を動かしたり変形させたりする際、メインスレッドを汚さずにGPUだけで再合成（Compositing）できるからだ。だが、この武器は「両刃の剣」である。
なぜレイヤー昇格が起こるのか？
以下のようなCSSプロパティやトリガーが、ブラウザに「この要素は独立したレイヤーにする価値がある」と判断させる。
- `transform: translateZ(0)` や `will-change: transform`
- `opacity` のアニメーション
- `
- `filter` や `mask` の適用
- `