在前端開發中，CSS 動畫是提升用戶體驗的重要手段，但很多開發者在使用動畫時并不了解瀏覽器背后的渲染機制，導致動畫卡頓甚至影響整體性能。本文將帶你深入理解 CSS 中的兩大核心概念 —— 重排（Reflow） 與 重繪（Repaint），并掌握如何編寫高性能的 CSS 動畫。
一、什么是 Reflow（重排）？
重排是指瀏覽器在渲染過程中，重新計算元素的幾何結構（位置、大小、盒模型）的過程。
會觸發 Reflow 的典型操作：
- 修改幾何類屬性：
width、height、margin、padding、border - 位置屬性：
top、left、bottom、right - 布局屬性：
display、position、overflow - DOM 操作：添加、刪除、修改節點
- 讀取某些屬性（如
offsetTop,scrollHeight等）會強制觸發 reflow
?? 重排是瀏覽器渲染中最昂貴的操作之一，可能導致整個頁面重新計算布局，開銷巨大。
二、什么是 Repaint（重繪）？
重繪是指元素樣式發生改變（如顏色、透明度、陰影等）而不影響布局的情況下，瀏覽器重新將像素繪制到屏幕的過程。
會觸發 Repaint 的典型屬性：
colorbackgroundbox-shadowvisibilityborder-coloropacity（僅重繪，不重排）
Repaint 相比 Reflow 成本較低，但在短時間內大量觸發仍會影響性能。
三、最推薦的動畫屬性：Composite-only 屬性
有一類動畫屬性不會觸發 Reflow 或 Repaint，而是直接由 GPU 圖層合成完成，性能極佳：
? 推薦動畫屬性：
transform?opacity?filter（部分瀏覽器可能仍會 repaint）
推薦寫法：
.box {will-change: transform, opacity;transition: transform 0.3s ease, opacity 0.2s ease;
}
四、常見動畫屬性性能比較
| 屬性名 | 會觸發 | 性能建議 |
|---|---|---|
transform | Composite | ? 推薦 |
opacity | Composite | ? 推薦 |
left/top 等定位屬性 | Reflow+Repaint | ? 慎用 |
width/height | Reflow+Repaint | ? 慎用 |
background-color | Repaint | ?? 一般 |
box-shadow | Repaint | ?? 一般 |
五、不要濫用 transition: all
雖然 transition: all 0.3s ease; 寫起來簡單，但它有以下幾個問題：
- 性能差：會監聽所有可動畫屬性
- 不可控：有些屬性其實不能動畫（比如
display），容易產生混亂 - 調試難：不清楚到底哪些屬性在執行動畫
? 推薦寫法：
transition: transform 0.3s ease, opacity 0.2s ease;
六、實戰建議總結
- ? 動畫盡量只使用
transform和opacity - ? 使用
will-change提前告訴瀏覽器優化這些屬性 - ? 避免
left/top/width/height動畫，改用transform: translate()或scale()替代 - ? 不要使用
transition: all
通過理解 Reflow 與 Repaint 的工作機制，我們可以編寫出更高效、更流暢的 CSS 動畫，提升用戶體驗的同時，降低性能消耗。如果你在動畫性能上遇到具體問題，也歡迎留言或繼續交流！
