深入理解重排（Reflow）与重绘（Repaint），写出高性能 CSS 动画

在前端开发中，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 的典型属性：

• color
• background
• box-shadow
• visibility
• border-color
• opacity（仅重绘，不重排）

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; 写起来简单，但它有以下几个问题：

1. 性能差：会监听所有可动画属性
2. 不可控：有些属性其实不能动画（比如 display），容易产生混乱
3. 调试难：不清楚到底哪些属性在执行动画

✅ 推荐写法：

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