重绘（Repaint）•

重绘是指当元素的外观发生改变，但不影响其布局时，浏览器会重新绘制该元素。常见的触发重绘的操作包括：

  • 改变元素的颜色（如 color、background-color 等）。

  • 改变元素的可见性（如 visibility）。

  • 改变元素的边框颜色（如 border-color）。

重绘只影响元素的外观，而不涉及元素的位置和大小，所以相对来说开销较小。

回流（Reflow）•

回流（又称重排）是指当页面布局或几何属性（如宽高、位置等）发生变化时，浏览器需要重新计算元素的位置和尺寸，并重新渲染页面。常见的触发回流的操作包括：

  • 添加或删除 DOM 元素。

  • 改变元素的大小（如 width、height）。

  • 改变元素的边距（如 margin、padding）。

  • 改变元素的边框（如 border-width）。

  • 改变元素的显示状态（如 display）。

  • 读取某些属性（如 offsetWidth、offsetHeight）。

回流会导致页面的重新布局，是性能开销较大的操作，尤其是在复杂的页面中。

优化重绘和回流•

为了提高页面性能，减少重绘和回流是非常重要的。以下是一些优化建议：

  1. 批量操作 DOM：尽量减少对 DOM 的多次操作，可以将多次操作合并。例如，使用 documentFragment 或 innerHTML 一次性添加多个元素。

  2. 使用 CSS 类：尽量通过改变元素的 CSS 类来应用样式变化，而不是逐个修改元素的样式属性。

  3. 减少布局触发：避免频繁读取会触发回流的属性（如 offsetHeight），可以将这些值缓存起来。

  4. 脱离文档流操作：在修改 DOM 前，先将元素从文档流中移除（如 display: none），修改完成后再重新插入。

  5. 避免使用表格布局：表格的布局和回流开销较大，尽量使用 div + CSS 布局。

  6. CSS 动画优化：尽量使用 transform 和 opacity 进行 CSS 动画，因为它们只触发重绘，不会触发回流。