浏览器重排（Reflow）与重绘（Repaint）的区别与优化

区别：

• Reflow（重排）：改变元素的几何属性（宽/高/边距/位置），浏览器重新计算布局树。性能开销大。
• Repaint（重绘）：改变元素的视觉外观但不影响几何（背景色/阴影/轮廓），只需重新绘制像素。性能开销较小。
• Composite（合成）：只改变 transform/opacity，仅 GPU 合成。性能最优。

触发 Reflow 的操作：

1. 改变尺寸：width/height/padding/margin/border
2. 改变位置：top/left/position/float/display
3. 改变内容：文本变更、图片加载、font-size
4. 读取布局属性（强制同步布局）：offsetHeight/offsetTop/scrollTop/getComputedStyle()
5. 窗口 resize、CSS 伪类 :hover

优化策略：

1. 批量操作：用 DocumentFragment 或 display: none（一次性）包裹批量 DOM 操作
2. 读写分离：先统一读，后统一写（避免强制同步布局）
3. 使用 transform 替代 top/left（仅合成）
4. 使用 opacity 替代 visibility/display（仅合成）
5. CSS 类切换：批量修改 class 而非逐属性修改
6. requestAnimationFrame：在下一帧执行写操作
7. will-change：提前告知浏览器创建独立图层

// 错误：强制同步布局
const h1 = el.clientHeight;
el.style.height = h1 + 10 + 'px';
const h2 = el.clientHeight; // 再次强制布局

// 正确：批处理
el.style.cssText = 'height: 100px; width: 200px;';