Q29
★ ★ ★ ★ ★
CSS 重绘（Repaint）和回流（Reflow）的区别？
⚡ 速记答案（30 秒）
回流：布局变化，重新计算几何信息（更贵）。重绘：只外观变化（颜色、阴影）不改布局，仅重新填充像素。优化：尽量只改 transform/opacity，减少 DOM 测量、批量修改样式。
📖 详细讲解
标准面试回答（推荐记住）
回流和重绘是浏览器渲染过程中的两个阶段。回流也叫重排，当元素的尺寸、位置、布局发生变化时，浏览器需要重新计算元素的几何信息，这个过程开销很大。重绘是当元素的外观变化但不影响布局时，比如改变颜色、阴影，浏览器只需要重新绑制像素，开销相对较小。回流一定会触发重绘，但重绘不一定触发回流。优化方法是尽量只修改 transform 和 opacity，减少不必要的 DOM 测量，批量修改样式。
触发回流的操作
- 改变元素尺寸（width/height/padding）
- 改变元素位置（top/left/margin）
- 添加删除 DOM 元素
- 读取布局信息（offsetWidth/scrollTop）
只触发重绘
- 改变颜色（color/background-color）
- 改变阴影（box-shadow）
- 改变可见性（visibility）
✅ 面试要点
- •回流计算布局，重绘填充像素
- •回流比重绘开销更大
- •用 transform/opacity 优化动画