面试题：什么是回流（reflow）与重绘（repaint）？如何减少？

回流（layout / reflow）

几何信息变化导致浏览器重新计算布局（位置、尺寸），可能整文档或局部；代价高。

常见触发：改 width/height、位置、内容增删、字体、读布局属性触发强制同步布局等。

重绘（paint）

外观变化但不影响布局（如 color、visibility、box-shadow），重画像素；一般比回流轻，但仍消耗。

优化思路

• 批量读写分离：避免循环里读再写交替导致多次回流（先读后写或 requestAnimationFrame）。
• 动画优先 transform/opacity。
• DocumentFragment、离线改 DOM 再挂载。
• contain 属性：限制布局/绘制范围（需兼容性与场景评估）。