請問瀏覽器的渲染過程？回流 (reflow) 重繪 (repaint) 的差別是什麼

瀏覽器渲染流程

從 HTML / CSS / JS 到螢幕上的畫面，瀏覽器會經歷以下步驟：

HTML → DOM 樹
CSS  → CSSOM 樹
        ↓
     Render Tree（合併可見節點）
        ↓
     Layout（回流）— 計算每個元素的幾何位置與大小
        ↓
     Paint（重繪）— 將元素繪製成像素
        ↓
     Composite — 合成圖層，送 GPU 顯示

各步驟說明

1. HTML 解析 → DOM：逐步解析 HTML 標籤，建立 DOM 節點樹。
2. CSS 解析 → CSSOM：解析 CSS（外部、內嵌、行內），建立 CSSOM 樹。
3. Render Tree：將 DOM 與 CSSOM 合併，僅包含可見節點（display: none 的元素不在此樹）。
4. Layout（Reflow）：計算每個節點的確切位置、大小（像素值）。
5. Paint（Repaint）：把 Render Tree 的節點繪製到圖層上（文字、顏色、邊框、陰影…）。
6. Composite：把多個圖層合成最終畫面，交由 GPU 輸出。

Reflow（回流）

定義：元素的幾何屬性（寬高、位置、邊距）改變，瀏覽器需重新計算 Layout，再 Paint、Composite。

觸發 Reflow 的操作

• 新增 / 刪除 DOM 節點
• 修改 width、height、padding、margin、border、position
• 讀取強制同步佈局的屬性：offsetWidth、clientTop、getBoundingClientRect()、getComputedStyle()
• 視窗 resize、字型載入完成

成本

非常高——尤其是影響多個元素的改變，可能觸發整個頁面的重排。

Repaint（重繪）

定義：元素的外觀屬性（顏色、背景、visibility）改變，但不影響幾何，瀏覽器只需重新 Paint，不需重新 Layout。

觸發 Repaint 的操作

• color、background-color、visibility、outline、部分 box-shadow

成本

中等——比 Reflow 便宜，但仍有開銷。

兩者關係

Reflow 一定伴隨 Repaint；Repaint 不一定觸發 Reflow。

Composite Only（最佳）

某些屬性只走 Composite，完全不觸發 Layout 或 Paint：

• transform
• opacity
• filter（部分）

這類屬性由 GPU 在合成階段處理，是動畫效能最佳選擇。

優化建議

策略	說明
使用 transform / opacity 做動畫	只走 Composite，不觸發 Layout/Paint
批次修改樣式	一次改 class 而非多次改 style
避免強制同步佈局	先讀後寫，不在迴圈中交替
虛擬 DOM	React/Vue diff 批次更新 DOM
will-change: transform	提升合成層（慎用）

小結

類型	觸發原因	成本	後續步驟
Reflow	幾何變化	最高	Layout → Paint → Composite
Repaint	外觀變化	中	Paint → Composite
Composite	transform/opacity	最低	Composite