在前端开发中，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 动画，提升用户体验的同时，降低性能消耗。如果你在动画性能上遇到具体问题，也欢迎留言或继续交流！
