页面重排（reflow）与重绘（repaint）是影响浏览器渲染性能的两大操作。频繁或大量的 reflow 会显著增加主线程负载，导致动画卡顿、输入延迟与较高的交互延迟。
reflow 与 repaint 的区分
- reflow（layout）：当元素几何属性（尺寸、位置）改变时，浏览器需要重新计算布局。
- repaint（paint）：在样式颜色、背景等外观改变但不影响布局时触发，仅涉及绘制操作。
常见触发场景
- 读写 DOM 混合操作（读 layout 属性后又写入）会引起强制同步布局，导致性能问题。
- 动态添加大量元素、改变元素尺寸、或频繁修改样式都会导致 reflow。
优化技巧
- 批量操作：尽量把 DOM 读操作聚在一起、写操作聚在一起，避免读写交叉。
- 使用
transform和opacity做动画：这类属性主要由合成层处理，避免触发 reflow。 - 虚拟化列表：对大量列表使用虚拟化（windowing），减少同时存在于 DOM 的节点数。
- 预分配空间：为媒体和占位元素指定宽高，避免加载时因元素尺寸变化触发 CLS。
工具与诊断
- 使用 Chrome DevTools 的 Performance 面板录制并查看 Layout/Paint 的时间分布，定位重排热点。
- 使用
getComputedStyle与offsetWidth等属性时要谨慎，这些 API 可能触发强制重排。
相关链接：