レイアウト・ペイント・コンポジット: レンダリングパイプライン

レンダーツリーが構築されると、ブラウザーは3つの段階を実行します。Layout（要素のサイズと位置の計算）、Paint（色、テキスト、画像でピクセルを塗りつぶす処理）、Composite（ペイントされたレイヤーを組み合わせて画面に表示する処理）です。

レイアウトでは、すべての要素のジオメトリ（width、height、x/y位置）を計算します。ジオメトリに影響するプロパティ（width、margin、padding、font-size、position）を変更すると、その要素と、場合によってはサブツリー全体でレイアウトが発生します。これは最も負荷の高い段階です。

ペイントでは、各レイヤーのピクセルを塗りつぶします。対象は背景、境界線、テキスト、影です。color、background-color、visibility、border-radiusを変更すると、再レイアウトなしで再ペイントが発生します。レイアウトよりは低コストですが、広い領域を再ペイントすると依然として負荷が高くなります。

コンポジターはGPUを使ってレイヤーを合成します。transformとopacityのようにコンポジット処理だけに影響するCSSプロパティは、レイアウトやペイントを発生させずにアニメーションできます。GPUが処理するため、CPUの関与を最小限に抑えながら60fpsで動作します。

csstriggers.com（現在はブラウザー側のドキュメント）では、各ブラウザーエンジンでどのCSSプロパティがレイアウト、ペイント、コンポジットのどれを発生させるかを説明しています。アニメーションに使うプロパティの監査に利用してください。アニメーションにはtransformとopacityを優先します。

レイアウトスラッシングは、JavaScriptがループ内でレイアウトプロパティ（offsetWidth）の読み取りとスタイルプロパティの書き込みを交互に行うと発生します。書き込みのたびにレイアウトが無効になり、読み取りのたびに同期的なリフローが強制されます。スラッシングを避けるため、すべての読み取りを先に行い、その後ですべての書き込みを行います。

要素が独自のレイヤーにある場合、コンポジターだけで完全に処理されるのはtransformとopacityです。left/topなど他のプロパティをアニメーションさせると、メインスレッドでレイアウトまたはペイントが発生し、カクつきの原因になる可能性があります。

ブラウザーは、will-change: transformが指定されている要素、transform/opacityのCSSアニメーションがある要素、コンポジット対象の近接要素を持つ固定位置の要素、または3D transformを持つ要素を独自のGPUレイヤーに昇格させます。各レイヤーはGPUメモリを使用するため、レイヤーが多すぎるとメモリへの負荷が高くなります。

ペイントストームは、毎フレームでページの大部分が再描画されると発生します。Chrome DevTools → Rendering → Paint flashing でプロファイルを取得し、再描画されている領域を特定します。頻繁にアニメーションする要素を専用レイヤーに分離して、再描画領域を限定します。

Chrome DevToolsでパフォーマンスプロファイルを記録します。フレームチャートには、Layout、Update Layer Tree、Paint、Compositeの各イベントが表示されます。LayoutやPaintのバーが長い場合は、ボトルネックがあることを示します。60fpsを維持するには、フレーム時間を16ms未満にすることを目指します。

可能な限り、transformとopacityを使ってアニメーションさせます。表示アニメーションではwidth/heightの代わりにclip-pathを使用します。現代のブラウザーでは、clip-pathはコンポジターで処理しやすいためです。box-shadowのアニメーションは避け、代わりにopacityと、あらかじめ影を描画した擬似要素を使用します。

レンダリングパイプラインであるLayout、Paint、Compositeが、アニメーションのパフォーマンスを決定します。Layoutが最も高コストで、Paintは中程度です。Compositeのみで処理されるプロパティ（transform、opacity）はGPUで処理されます。これらのトリガーを理解すると、レイアウトスラッシングやペイントストームを発生させず、滑らかな60fpsのアニメーションを構築できます。