重温「重绘」与「回流」

「重绘」（Repaint）与「回流」（Reflow）是浏览器渲染过程中的关键性能瓶颈。回流必然触发重绘，而重绘不一定触发回流。优化核心在于减少回流次数，通过CSS与DOM操作策略降低渲染开销。以下是系统性解析与实战优化方案：

---

一、本质区别与触发机制

维度	回流（Reflow）	重绘（Repaint）
定义	重新计算元素几何属性（布局改变）	重新绘制元素外观（样式改变）
触发条件	影响布局的操作（如尺寸、位置变化）	不影响布局的样式变化（如颜色）
性能开销	高（可能引发连锁反应）	低（仅局部绘制）

常见回流触发场景：

1. 几何属性变更：width、height、margin、padding等。
2. 内容变化：文本增减、图片大小改变。
3. 结构变化：增删DOM节点、display: none。
4. 视口操作：窗口缩放、滚动。
5. 样式查询：访问offsetTop、scrollWidth等布局属性（强制同步回流）。

常见重绘触发场景：

1. 非几何样式变更：color、background、visibility等。
2. 视觉特效：outline、box-shadow（不改变布局时）。

---

二、性能优化策略

1. CSS优化：减少布局抖动

• 避免逐行修改样式：合并多次操作，使用classList批量更新。
• 优先使用CSS动画：利用transform和opacity（触发GPU加速，跳过布局计算）。

  .box {
        
    transform