什么是 重排(reflow) 和 重绘(repaint)？怎么优化页面渲染性能？

概念区别

1. 重排（Reflow / Layout）
   浏览器要重新计算元素的几何信息：位置、宽高、布局关系。
   典型触发：改 width/height/padding/margin、改 display、增删 DOM、窗口 resize。

2. 重绘（Repaint）
   不改几何信息，只改外观，浏览器重新“上色”。
   典型触发：改 color/background/box-shadow 等。

3. 关系
   重排一定会引发重绘，重绘不一定重排。
   所以重排通常更贵、性能影响更大。

怎么优化渲染性能

1. 少做会触发布局的改动
   尽量用一次性改 class，避免频繁逐条改样式。

2. 读写分离，避免布局抖动（layout thrashing）
   先批量读布局（如 offsetWidth），再批量写样式，不要读写交替。

3. 动画优先用 transform 和 opacity
   尽量避免动画改 top/left/width/height。

4. 批量更新 DOM
   用 DocumentFragment、一次性插入；复杂更新可先隐藏容器再显示。

5. 减少渲染范围和复杂度
   简化 DOM 层级，长列表用虚拟列表（只渲染可视区）。

6. 合理使用新特性隔离开销
   可用 contain、content-visibility 限制重排影响范围；will-change 谨慎使用。

7. 用 DevTools 定位热点
   在 Performance 面板看 Layout/Paint 开销，优先优化高频和长耗时操作。