重绘与回流：前端性能优化的关键概念与优化技巧

重绘（Repaint）和回流（Reflow）是浏览器渲染过程中的两个关键概念，它们直接影响网页的性能和用户体验。理解这两个概念对于优化前端性能至关重要。

1. 重绘（Repaint）

重绘是指当元素的样式发生变化，但不影响其在文档流中的位置和几何属性时，浏览器只需要重新绘制该元素的外观。例如，改变元素的背景颜色、文字颜色、边框颜色等，这些操作只会触发重绘。

特点：

• 只涉及视觉样式的变化，不涉及布局的改变。
• 性能开销相对较小，但仍然需要消耗一定的计算资源。

2. 回流（Reflow）

回流是指当元素的几何属性（如宽度、高度、位置等）发生变化时，浏览器需要重新计算元素的布局，并重新构建渲染树。回流会导致整个或部分页面的重新布局，因此性能开销较大。

触发回流的常见操作：

• 添加或删除可见的DOM元素。
• 改变元素的尺寸（宽度、高度、内外边距等）。
• 改变元素的位置（如通过position、top、left等属性）。
• 改变窗口大小。
• 修改字体大小或内容（如文本内容的变化导致布局改变）。

3. 重绘与回流的关系

• 回流必定触发重绘：因为回流会重新计算布局，导致元素的外观也需要重新绘制。
• 重绘不一定触发回流：如果只是改变元素的视觉样式而不影响布局，则只会触发重绘。

4. 性能优化建议

为了减少重绘和回流对性能的影响，可以采取以下优化措施：

• 避免频繁操作样式：尽量一次性修改多个样式属性，而不是逐条修改。可以使用classList来批量修改类名，或者使用cssText来一次性设置多个样式。

  // 不推荐
  element.style.width = '100px';
  element.style.height = '200px';
  
  // 推荐
  element.style.cssText = 'width: 100px; height: 200px;';
  

• 使用transform和opacity：这些属性不会触发回流，因为它们不会影响布局。可以使用transform来进行位移、缩放等操作，使用opacity来改变透明度。

• 避免强制同步布局：在JavaScript中，某些操作会强制浏览器立即执行回流，例如读取offsetWidth、offsetHeight等属性。尽量避免在布局变化后立即读取这些属性。

  // 不推荐
  const width = element.offsetWidth;
  element.style.width = width + 10 + 'px';
  
  // 推荐
  element.style.width = '100px';
  

• 使用DocumentFragment：在批量操作DOM时，可以使用DocumentFragment来减少回流次数。DocumentFragment是一个轻量级的文档对象，可以在内存中操作DOM，最后一次性插入到文档中。

  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
      const li = document.createElement('li');
      li.textContent = 'Item ' + i;
      fragment.appendChild(li);
  }
  document.getElementById('list').appendChild(fragment);
  

• 使用will-change：对于即将发生复杂动画或变换的元素，可以使用will-change属性来提示浏览器提前优化。

  .element {
      will-change: transform, opacity;
  }
  

5. 总结

重绘和回流是浏览器渲染过程中的重要环节，理解它们的触发条件和优化方法对于提升前端性能至关重要。通过减少不必要的回流和重绘，可以显著提高页面的渲染性能，从而提升用户体验。