web开发中浏览器的重排与重绘

重排（Reflow） 和 重绘（Repaint） 是浏览器在渲染网页时涉及的两个重要过程，它们直接影响网页性能。理解它们的区别和优化方法对于前端开发至关重要。

---

1. 重排（Reflow）

定义

重排是指当网页布局或几何属性发生变化时，浏览器需要重新计算元素的位置和大小，并对整个页面或部分页面进行布局更新的过程。

触发条件

以下操作会触发重排：

• 添加、删除 DOM 元素。
• 改变元素的几何属性（如宽度、高度、边距、边框、内边距等）。
• 改变页面字体大小。
• 通过 display 属性隐藏或显示元素。
• 浏览器窗口大小变化（触发 resize 事件）。
• 修改 DOM 树（例如插入节点或改变节点层级）。
• 计算某些属性（如 offsetWidth, offsetHeight, getBoundingClientRect()）。

性能开销

重排是一个代价昂贵的操作，因为它可能影响整个页面的布局。触发重排时，浏览器需要：

1. 遍历 DOM 树，重新计算所有受影响的节点及其子节点的位置和大小。
2. 更新渲染树并进行绘制。

示例

const element = document.getElementById('example');
element.style.width = '200px'; // 改变宽度，触发重排

---

2. 重绘（Repaint）

定义

重绘是指当元素的样式改变但不影响其布局时，浏览器重新绘制元素的外观。

触发条件

以下操作会触发重绘：

• 改变颜色（color、background-color 等）。
• 改变透明度（opacity）。
• 改变盒阴影（box-shadow）。
• 改变文字颜色或图像背景。

性能开销

重绘的性能开销比重排小得多，因为它不会涉及布局的重新计算。重绘仅仅是对页面的一些像素进行重新渲染。

示例

const element = document.getElementById('example');
element.style.backgroundColor = 'blue'; // 改变背景色，触发重绘

---

3. 重排与重绘的区别

比较项	重排（Reflow）	重绘（Repaint）
触发条件	布局或几何属性改变	样式改变但不影响布局
性能开销	高，可能影响整个页面	较低，仅重新绘制外观
典型操作	改变宽高、添加/删除元素、改变位置等	改变颜色、背景、阴影、透明度等

---

4. 优化重排与重绘

减少重排的策略

1. 合并 DOM 操作：
   将多次 DOM 操作合并在一起，例如，使用文档片段（DocumentFragment）或 innerHTML 一次性插入多元素。

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

2. 批量修改样式：
   避免逐一修改样式，改用 CSS 类或 style.cssText。

   const element = document.getElementById('example');
   element.style.cssText = 'width: 100px; height: 100px; background: red;';
   

3. 离线修改：

   • 使用 cloneNode 克隆节点，离线修改后再替换原节点。
   • 或者使用 display: none 隐藏元素，完成所有修改后再显示。

4. 避免频繁读取布局信息：
   一些属性（如 offsetHeight, clientWidth, getBoundingClientRect）会触发强制同步布局，尽量减少访问次数。

   // 错误：多次读取和写入样式，频繁触发重排
   const element = document.getElementById('example');
   element.style.width = element.offsetWidth + 1 + 'px';
   
   // 正确：缓存读取结果
   const width = element.offsetWidth;
   element.style.width = width + 1 + 'px';
   

5. 使用 CSS 动画：
   将动画交给 GPU 处理，例如使用 transform 或 opacity，避免触发重排。

---

减少重绘的策略

1. 尽量减少不必要的样式改动：
   避免频繁修改颜色、背景等样式。

2. 优化复杂绘制效果：
   如渐变、阴影等，尽量减少页面中大量复杂的视觉效果。

---

5. 总结

操作类型	影响的范围	优化优先级
重排（Reflow）	整个布局或局部布局	高
重绘（Repaint）	仅影响视觉外观，无布局变化	中

优化 Web 性能时，优先减少重排，因为它对性能的影响更大。而重绘也应尽量减少，尤其是在低性能设备上可能造成卡顿。通过优化 DOM 操作、样式修改和动画策略，可以有效提升页面的渲染效率和用户体验。