フロントエンドの世界へようこそ。シニアフロントエンドアーキテクトの「ナオト」です。
日々の開発で「アニメーションがガタつく」「スマホでページをスクロールすると一瞬真っ白になる」といった現象に頭を悩ませていませんか？
「とりあえず `will-change` を書いたら直った」「よく分からないけど `transform: translateZ(0)` をおまじないで入れている」——もし心当たりがあるなら、この記事はまさにあなたのためのものです。
今回は、ブラウザレンダリングの最終工程であり、Webアプリの「滑らかさ（Jank-free）」を極限まで高めるための鍵となる「コンポジット（合成）」の仕組みについて、ブラウザの内部アーキテクチャから実務での最適化手法まで、泥臭いリアルな知見を交えて徹底的に解説します。
これを読めば、ブラウザが裏側でどうやってピクセルを画面に描画しているのかがクリアになり、自信を持ってパフォーマンスチューニングができるようになりますよ。
—
1. レンダリングパイプラインにおける「コンポジット」の立ち位置
まずは、ブラウザがHTML/CSSを受け取ってから画面に表示するまでの「レンダリングパイプライン」を脳内に描いてみてください。
[DOM/CSSOM] ──> [Layout (Reflow)] ──> [Paint (Repaint)] ──> [Composite (合成)]
1. Layout (Reflow): 要素の幾何学的な位置や大きさを計算する（CPU処理）
2. Paint (Repaint): 計算された位置に基づいて、背景色や文字、境界線などの「ピクセル」を描く（CPU/
コメント