回流和重绘

回流（reflow）

提示

或者称为重排。

回流也常被称为重排，指浏览器需要重新计算元素几何信息和布局关系。

常见触发场景：

• 改变元素尺寸、位置、边框、字体等可能影响布局的样式。
• 增删 DOM 节点。
• 读取某些布局信息时，浏览器为了拿到最新结果，可能触发强制同步布局。

修改样式时，浏览器通常会尽量合并这类变更：

dom.style.width = '100px'
dom.style.height = '100px'
dom.style.border = '1px solid red'

// 浏览器通常会把这些变更合并后统一处理。

读取布局信息时，更容易出现强制同步布局：

dom.clientHeight
dom.offsetWidth
dom.getBoundingClientRect()

// 为了返回最新布局结果，浏览器可能立即执行布局计算。

重绘（repaint）

重绘指元素几何信息不变，但像素表现发生变化，例如颜色、背景、阴影等变化。

dom.style.backgroundColor = 'red'

这类操作通常不会改变布局，但会让浏览器重新绘制。

二者关系

• 回流通常比重绘更重。
• 回流通常会伴随重绘。
• 重绘不一定触发回流。

优化方向

• 合并样式修改，避免频繁读写交错。
• 动画优先考虑 transform、opacity。
• 批量读取布局后再批量写入，避免反复强制同步布局。