回流与重绘

定义

回流（Reflow，也称重排）指元素的几何属性（尺寸、位置、结构）发生变化时，浏览器重新计算布局的过程；重绘（Repaint）指元素外观（颜色、背景、阴影等）变化但几何不变时，浏览器重新绘制像素的过程。回流必然触发重绘，重绘不一定伴随回流。

触发条件

回流常由修改宽高、增删 DOM 节点、改变字体大小、读取 offsetWidth 等布局属性（强制同步布局）引发；重绘则由 color、background、visibility 等纯视觉属性变化引发。

优化方法

• 批量修改样式，避免逐条改动；
• 使用 class 切换代替内联样式；
• 对频繁变动的元素使用 transform、opacity 等可由合成器处理的属性；
• 避免在循环中交替读写布局属性；
• 使用 DocumentFragment 或先脱离文档流再操作。

意义

回流是渲染管线中开销最大的环节之一，理解二者区别是编写高性能页面动画与交互的基础。