ブラウザの描画パイプライン — どこからやり直すか
ブラウザは、受け取ったHTMLとCSSをいきなり画面に出しているわけではありません。決まった工程を順に通って、はじめてピクセルになります。HTML→DOM、CSS→CSSOMを作り、両者を合わせたRender Treeから、Layout(配置)→Paint(塗り)→Composite(合成)へ。この流れがレンダリングパイプラインです。
大事なのは、表示後に何かを変えると、変えた内容しだいで「どの工程からやり直すか」が変わること。そしてこれが、なめらかなUIを作れるかどうかを分けます。下の図1で、まず「初回レンダリング」を実行し、次に3種類の変更を試して、再実行されるステージの数を見比べてください。
「どこからやり直すか」が速さを決める
パイプラインは上流から下流への一方通行です。だから上流の工程が変わると、それより下流はすべてやり直しになります。要素の幅や位置(width・top など)を変えると、配置が崩れるのでLayoutからやり直し(Layout→Paint→Composite)。色や影(color・background)だけなら配置は変わらないのでLayoutを飛ばしてPaintから。そしてtransformやopacityは、塗り終わったレイヤーをずらして重ねるだけなのでCompositeだけで済みます。
この差は体感に直結します。Layoutのやり直し(リフロー)は重く、要素が多いほど時間がかかります。一方Compositeは多くの場合GPUに任せられるので、毎秒60回の更新でもなめらか。だからアニメーションは left や width ではなく transform と opacity で動かすのが定石なのです。図1で各ボタンを押すと、再実行されるステージの数が 3→2→1 と減っていくのが分かります。
- DOM / CSSOM
- HTMLとCSSをそれぞれ木構造に解析したもの。合わせてRender Treeを作る。
- Layout（リフロー）
- 各要素の位置と大きさを計算する工程。幅や配置が変わると再計算が必要で重い。
- Paint
- 色・文字・影などを実際のピクセルに塗る工程。色変更はここからやり直す。
- Composite
- 塗ったレイヤーを重ねて最終画面にする工程。transform/opacityはここだけで済む。
まとめ
ブラウザはDOM・CSSOM → Render Tree → Layout → Paint → Compositeという一方通行の工程で画面を作ります。再描画のコストは「どの工程から、やり直すか」で決まり、Layout(幅・位置) > Paint(色) > Composite(transform)の順に軽くなります。なめらかに動かしたいなら、Layoutを避けてtransform/opacityに寄せる――この一点を押さえるだけで、UIのカクつきは大きく減ります。