页面重绘和回流

**回流（Reflow）和重绘（Repaint）**是浏览器渲染页面时的两个关键过程，它们直接影响页面的性能。

---

1. 回流（Reflow）

回流是指浏览器重新计算元素的几何属性（如宽度、高度、位置等），并重新构建页面布局的过程。

触发回流的操作

以下操作会触发回流：

1. 修改元素的几何属性：
   • 修改宽度、高度、内外边距、边框等。
   • 修改 display 属性（如 none 到 block）。
2. 改变页面布局：
   • 添加或删除 DOM 元素。
   • 修改元素的 position、float、flex 等布局属性。
3. 窗口大小变化：
   • 用户调整浏览器窗口大小。
   • 设备方向变化（如手机横屏/竖屏切换）。
4. 读取某些属性：
   • 读取 offsetTop、offsetLeft、offsetWidth、offsetHeight 等属性时，浏览器会强制触发回流以确保获取的值是最新的。

回流的性能影响

• 回流是昂贵的操作，因为它会导致浏览器重新计算整个或部分页面的布局。
• 频繁的回流会导致页面卡顿，影响用户体验。

---

2. 重绘（Repaint）

重绘是指浏览器根据元素的样式重新绘制像素的过程。重绘不会改变元素的几何属性，因此不会影响页面布局。

触发重绘的操作

以下操作会触发重绘：

1. 修改元素的视觉样式：
   • 修改颜色、背景色、边框颜色、阴影等。
   • 修改 visibility 属性（如 visible 到 hidden）。
2. 不改变几何属性的其他样式：
   • 修改 opacity、transform、outline 等。

重绘的性能影响

• 重绘的性能开销通常比回流小，但如果频繁触发，仍然会影响性能。

---

3. 回流与重绘的关系

• 回流一定会触发重绘：因为回流会改变元素的几何属性，浏览器需要重新绘制元素。
• 重绘不一定触发回流：如果只是修改视觉样式而不影响布局，则只会触发重绘。

---

4. 如何减少回流和重绘

优化 CSS

1. 避免频繁操作样式：
   • 使用 class 一次性修改多个样式，而不是逐个修改。
   • 使用 CSS3 动画（transform、opacity）代替直接修改几何属性。
2. 使用 transform 和 opacity：
   • 这些属性不会触发回流，因为它们是在合成层中处理的。
3. 避免使用表格布局：
   • 表格布局会导致更多的回流。

优化 JavaScript

1. 批量修改 DOM：
   • 使用 DocumentFragment 或离线 DOM 进行批量操作。
   • 示例：

     const fragment = document.createDocumentFragment();
     for (let i = 0; i < 100; i++) {
       const div = document.createElement('div');
       fragment.appendChild(div);
     }
     document.body.appendChild(fragment);
     

2. 避免频繁读取布局属性：
   • 将需要多次读取的属性缓存到变量中。
   • 示例：

     const width = element.offsetWidth; // 缓存
     for (let i = 0; i < 100; i++) {
       element.style.width = width + i + 'px';
     }
     

3. 使用 requestAnimationFrame：
   • 在动画中使用 requestAnimationFrame 代替 setTimeout 或 setInterval，以确保动画与浏览器的刷新率同步。

优化布局

1. 使用 flex 或 grid 布局：
   • 这些布局方式比传统的 float 或 inline-block 更高效。
2. 避免强制同步布局：
   • 强制同步布局是指浏览器在 JavaScript 执行过程中被迫立即计算布局属性。
   • 示例：

     const width = element.offsetWidth; // 强制同步布局
     element.style.width = width + 10 + 'px';
     

---

总结

• 回流：重新计算元素的几何属性，影响布局。
• 重绘：重新绘制元素的像素，不影响布局。
• 优化方法：减少 DOM 操作、使用 CSS3 动画、缓存布局属性、使用 requestAnimationFrame 等。