リフローとリペイントを引き起こすCSSプロパティの分類

3段分類という考え方

CSSプロパティを変更したとき、ブラウザがどれだけ仕事をするかは「どの段から再計算が始まるか」で決まります。レンダリングパイプラインは大きくレイアウト（Layout / リフロー）→ペイント（Paint / リペイント）→コンポジット（Composite / 合成）の順に流れ、ある段の入力が変わるとその段以降がすべてやり直しになります。したがってプロパティは、変更がどの段を起点に無効化を起こすかで3群に分類できます。段順と無効化の伝播そのものは レンダリングパイプライン詳説 と ブラウザのレンダリング で詳しく扱っていますが、本稿は個々のプロパティの仕分けと、レイアウトスラッシングの発生原理に焦点を絞ります。

鍵は「起点が上流なほど、下流の段がただ乗りで全部走る」点です。レイアウトを起こす変更は必ずペイントとラスタライズと合成も誘発します。逆にコンポジット起点なら、上流の重い2段を丸ごとスキップできます。

レイアウトを起こすプロパティ（最重量）

要素のボックスの幾何を左右する値は、変更するとレイアウトツリーの再計算（リフロー）から始まります。レイアウトは双方向の依存を持つため重く、1要素の寸法変化が祖先・兄弟・子孫へ波及します。

代表例は次の通りです。これらは「サイズ・位置・フローに影響するか」で見分けられます。

寸法系: width, height, min/max-width, min/max-height, padding, border-width
位置系: top, left, right, bottom, margin
表示系: display, float, position, overflow
テキスト系: font-size, font-family, line-height, text-align, white-space, vertical-align
内在系: フレックス/グリッドの各種（flex-basis, grid-template など）

ペイントを起こすプロパティ（中量）

寸法を変えずに見た目だけを変える値は、レイアウトをスキップしてペイント段から再計算します。ペイント段は実際に塗るのではなく、各レイヤーの描画命令のリスト（display list）を再記録する工程です（詳細は レンダリングパイプライン詳説 参照）。レイアウトを飛ばせる分レイアウト起点より軽いですが、対象領域のラスタライズをやり直すため無料ではありません。

color, background-color, background-image, background-position
border-color, border-style, box-shadow, outline
visibility（hidden は領域を保持するのでレイアウト不変）
border-radius, text-decoration（色やスタイルの変更）

コンポジットのみで完結するプロパティ（最軽量）

transform と opacity は、要素が合成レイヤーへ昇格していれば、レイアウトもペイントも起こさずコンポジタスレッドの再合成だけで反映できます。理由は、これらの値がペイント段の display list ではなくプロパティツリーのノードとして保持され、値の差し替えだけで合成へ渡せるからです。

/* 良い：合成のみで完結。リフローもリペイントも発生しない */
.box { will-change: transform; }
.box:hover { transform: translateX(20px) scale(1.05); opacity: 0.8; }

/* 悪い：見た目は近いが left/width はレイアウト起点で全段が走る */
.box-bad:hover { left: 20px; width: 105%; }

レイアウトスラッシングの発生原理

レイアウトスラッシング（layout thrashing、強制同期レイアウト）は、1フレーム内でレイアウトが何度も走って急激にカクつく現象です。原理はブラウザのレイアウトのバッチ化にあります。

通常ブラウザは、スタイル書き込みを溜め込み、フレーム末でまとめて1回レイアウトします。ところが書き込みの直後にジオメトリを読むと、ブラウザは「正しい値を返すために今すぐレイアウトせねば」と判断し、その場で同期実行します。これをループ内で繰り返すと、要素数ぶんレイアウトが走ります。

// 悪い：読み（offsetHeight）と書き（height）が交互 → 反復ごとに強制同期レイアウト
for (const el of boxes) {
  const h = el.offsetHeight;      // 保留中のレイアウトを完了させる（読み）
  el.style.height = h * 2 + 'px'; // レイアウトを汚す（書き）→ 次の読みでまた完了
}

このコードは要素が N 個なら N 回レイアウトが走り、計算量が要素数に比例して悪化します。原因は読みと書きがインターリーブしている点だけで、処理内容自体は変わりません。

回避策：読み書きフェーズ分離

解決は単純で、すべての読みを先に済ませ、すべての書きを後でまとめることです。間に書きが挟まらなければ、読みはキャッシュ済みの単一レイアウトから返り、書きはフレーム末の1回に集約されます。

// 良い：読みフェーズ → 書きフェーズに分離 → レイアウトはフレームで1回
const heights = boxes.map(el => el.offsetHeight); // 読みをまとめる
boxes.forEach((el, i) => {                         // 書きをまとめる
  el.style.height = heights[i] * 2 + 'px';
});

実務では次の3点を併用します。

contain: layout は内部レイアウトを外と分離し、子の寸法変化が祖先へ波及するのを止めます。content-visibility: auto は画面外要素のレイアウトとペイントを遅延します。いずれも無効化の伝播範囲を縮める方向の道具で、スラッシング対策の読み書き分離と相補的です。FLIP テクニック（最終状態を一度測ってから差分を transform で再生する手法）も、測定を1回に閉じ込めてアニメーション本体を合成のみに寄せる、同じ思想の応用です。

実務での仕分け手順

• 動かす前に分類する：変更したいプロパティが幾何に触れるなら最重量。同じ見た目を transform / opacity で代替できないか先に検討する。
• 読み書きを分離する：DOM測定と更新をフレーム内で混ぜない。混ぜると要素数に比例してレイアウトが増える。
• 範囲を囲う：頻繁に更新する領域へ contain を当て、リフロー・リペイントの波及を物理的に断つ。
• 実測する：DevTools の Performance パネルで Layout / Paint のイベントを、Paint flashing で再描画範囲を確認する。

まとめ