レンダリングパイプライン詳説（スタイル→レイアウト→ペイント→コンポジット）

パイプライン全体像と「無効化の伝播」

ブラウザがDOMとCSSOMを画面のピクセルへ変換する工程は、一般にピクセルパイプラインと呼ばれます。Chromium（RenderingNG）では概ね次の段に分かれます。

1. スタイル（Style）：各要素の**計算済みスタイル（computed style）**を解決する。
2. レイアウト（Layout）：各ボックスの位置とサイズを確定し、レイアウトツリー（フラグメントツリー）を作る。
3. プレペイント（Pre-paint）：プロパティツリー（transform / clip / effect / scroll）を構築する。
4. ペイント（Paint）：実際の塗りではなく、**描画命令のリスト（display list）**を記録する。
5. ラスタライズ（Raster）：display list をタイル単位で実ピクセルに変換する。
6. コンポジット（Composite）：レイヤー／タイルをGPUで合成し、画面へ出す。

最重要の原理は無効化（invalidation）の伝播です。ある段の入力が変わると、その段以降がすべてやり直しになります。スタイルが変われば全段、レイアウトが変わればレイアウト以降、ペイントだけ変わればペイント以降。逆にコンポジットの入力だけを変えれば、上流の重い段を丸ごとスキップできます。これが「transform は速い」の根拠です。基礎の流れは ブラウザのレンダリング も参照してください。

スタイル：計算値の解決とリキャルク範囲

スタイル段の実体はマッチングとカスケード解決です。各要素について、適用されうる宣言を詳細度・由来・順序で並べ、継承を解決し、相対値（em、%、currentColor など）を計算値へ畳み込みます。

specified value → computed value（継承・相対値を解決）→ used value（レイアウトで確定）

ここで効くのがスタイル無効化の局所化です。ブラウザはセレクタの依存関係を追跡し、変更があった要素のサブツリーだけを再計算しようとします。.parent.active .child のような子孫セレクタは、祖先のクラス変化で広い範囲の再マッチを誘発します。一方 CSS カスタムプロパティ（変数）は、その変数を参照する要素のスタイルを無効化するため、:root 上の1変数を毎フレーム書き換えると広範なリキャルクを招きます。詳細度とカスケードの基礎は CSS を参照してください。

レイアウト：ジオメトリ確定とリフローの連鎖

レイアウト段は計算済みスタイルとボックスツリーから、各フラグメントの**幾何（座標・寸法・行ボックス）**を解きます。width:50% のような used value もここで実ピクセルへ確定します。

コストの本質は双方向の依存です。ブロックの高さは子の高さ合計に依存し、フレックス／グリッドの子サイズは親の利用可能幅に依存します。そのため1要素の寸法変更が祖先・兄弟・子孫へ波及し、**リフロー（再レイアウト）**が連鎖します。これを抑える仕組みが contain です。

// レイアウトを強制トリガするプロパティ読み取りの例
el.offsetWidth; el.offsetTop; el.getBoundingClientRect();
el.scrollHeight; getComputedStyle(el).height;
// これらを「書き込みの直後」に読むと強制同期レイアウトになる

ペイントとプロパティツリー：塗らずに「記録」する

ペイント段は誤解されがちですが、この時点ではピクセルを塗りません。各レイヤーに対して「ここに矩形、ここにテキスト、ここに影」という**描画命令のリスト（display list）**を記録するだけです。重なり順（stacking context、z-index）の解決もここに関わります。

プレペイントで構築されるプロパティツリーが鍵です。transform・clip・opacity（effect）・scroll をツリー状の独立データとして持つことで、要素の transform 値が変わっても display list を再記録せず、プロパティツリーのノード値だけ差し替えてコンポジットへ渡せます。これが後述の高速パスの土台です。

ラスタライズとコンポジット：レイヤー・タイル・GPU

display list はラスタライズで実ピクセルへ変換されます。Chromium ではビューポートをタイル（例 256x256 等）に分割し、可視領域に近いタイルを優先してラスタライズします（多くは別スレッド／GPUラスタライズ）。

合成の単位が**合成レイヤー（compositing layer）**です。ある要素が独立レイヤーへ昇格すると、その内容は専用のテクスチャとして保持され、位置や不透明度の変更はテクスチャの再描画なしに実現できます。レイヤー昇格のきっかけ（コンポジットトリガ）には次のようなものがあります。

最終段のコンポジットは、専用のコンポジタスレッドがプロパティツリー（特に transform / scroll / effect）を読み、各レイヤーのタイルをGPUで重ね合わせて画面へ出します。重要なのは、この処理がメインスレッドから独立している点です。

なぜ transform / opacity / will-change がリフローを回避できるのか

ここまでを踏まえると、原理は一本の線でつながります。

• transform と opacity はプロパティツリーのノード値として表現される。値の変更はそのノードを書き換えるだけで、スタイル・レイアウト・ペイント（display list 再記録）・ラスタライズのいずれも発生しない。コンポジタスレッドが新しい行列／不透明度でタイルを再合成するだけで済む。
• 一方 left / top / width / margin はレイアウトの入力そのもの。変更はレイアウトから全段の無効化を起こし、リフロー→リペイント→再ラスタライズ→合成と全工程が走る。
• will-change: transform は「この要素はこれから transform で動く」とブラウザに予告し、あらかじめ専用レイヤーへ昇格させる。昇格済みなら、アニメーション開始時にレイヤー生成と一度の再ペイントが発生せず、初手からコンポジットのみの高速パスに乗る。

/* 良い：合成のみ。コンポジタスレッドで完結し、リフローもリペイントも起きない */
.card { will-change: transform; }
.card:hover { transform: translateY(-8px) scale(1.02); }

/* 悪い：top はレイアウトの入力。毎フレーム リフロー→リペイント→合成の全工程 */
.card-bad:hover { top: -8px; }

実務での適用指針

• 動かすなら transform / opacity：アニメーションは可能な限りこの2つに寄せる。width / top / box-shadow のアニメーションは全工程を誘発する。
• 読み書きを分離：DOM のジオメトリ読み取りと書き込みをフレーム内でまとめ、強制同期レイアウトを避ける。
• 無効化を封じ込める：独立して更新される領域に contain や content-visibility を当て、再レイアウト・再ペイントの範囲を物理的に切る。
• ヒントは局所的に：will-change はアニメーションする要素に限定し、終わったら外す。

まとめ