重排和重绘

浏览器的 重排（Reflow，也称为 Layout） 和 重绘（Repaint） 是浏览器渲染页面时的重要过程。

重排（Reflow）

重排是指当页面布局或几何属性发生变化时，浏览器需要重新计算元素的位置和尺寸，从而更新整个页面的布局。

触发条件

以下操作可能会触发重排：

• 添加或删除 DOM 元素。
• 改变元素的几何属性，例如 width、height、padding、margin、border。
• 移动元素位置，例如改变 top、left 等定位属性。
• 改变元素的内容，例如文本变化导致尺寸变化。
• 修改窗口大小（resize 事件）。
• 获取某些属性（会导致浏览器强制计算布局）：
  • offsetTop、offsetLeft、offsetWidth、offsetHeight
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
  • getComputedStyle

性能影响

• 重排是一个高成本操作，因为浏览器可能需要重新计算整个或部分 DOM 树中所有元素的布局。
• 重排会导致后续的重绘，因此它比重绘开销更大。

---

重绘（Repaint）

重绘是指元素的外观发生改变（如颜色、背景、阴影等），但没有引起几何属性的变化时，浏览器仅需更新该元素的像素。

触发条件 以下操作可能会触发重绘：

• 改变元素的样式，但不影响布局：
  • color、background-color、visibility
  • outline、box-shadow
• CSS 伪类样式变化，如 :hover。

性能影响

• 重绘的成本比重排低，因为它不需要重新计算布局，只需要将更新后的样式应用到绘制表面上。

重排与重绘的关系

• 重排一定会导致重绘，因为布局改变可能会改变元素的外观。
• 重绘不一定会导致重排，因为外观变化不会影响布局。

---

性能优化

为了减少重排和重绘的影响，可以采取以下措施：

减少重排

• 避免逐项修改样式：合并多次样式修改为一次（例如通过 className 或 cssText）。
• 批量操作 DOM：使用文档片段（DocumentFragment）或隐藏元素后再进行操作（通过 display: none）。
• 避免频繁读取布局信息：将读取操作和写入操作分开（避免强制同步布局）。
• 使用 CSS 动画代替 JavaScript 动画：CSS 动画由浏览器优化，性能更高。

减少重绘

• 尽量减少视觉效果的频繁更新：例如动画时减少无关样式的变化。
• 优化复杂的绘制操作：例如使用 will-change 提示浏览器优化绘制。

---

总结

操作类型	描述	触发条件	性能影响
重排	几何属性或布局变化	尺寸、位置、添加/删除 DOM 节点等	高（会引发重绘）
重绘	外观变化但不影响布局	背景、颜色、阴影等样式变化	较低

TIP

内容来自 ChatGPT 仅作归纳总结