回流与重绘：前端性能优化要点

回流（Reflow）和重绘（Repaint）是浏览器渲染过程中的两个关键步骤，理解它们对于优化前端性能至关重要。

1. 回流（Reflow）

回流是指浏览器为了重新渲染部分或整个页面，重新计算元素的几何属性（如宽度、高度、位置等）的过程。回流的触发通常是由于DOM元素的几何属性发生了变化，例如：

• 添加或删除可见的DOM元素
• 元素尺寸改变（包括外边距、内边距、边框、宽度、高度等）
• 页面初始渲染
• 浏览器窗口大小改变
• 读取某些属性（如offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()等）

2. 重绘（Repaint）

重绘是指当元素的样式发生变化但不影响其几何属性时，浏览器会重新绘制元素的外观。重绘的触发通常是由于元素的颜色、背景、边框等样式属性发生了变化，例如：

• 改变元素的颜色
• 改变元素的背景
• 改变元素的边框样式

3. 如何触发回流和重绘

• 回流：任何导致元素几何属性变化的操作都会触发回流。例如：

  element.style.width = '100px';
  element.style.height = '100px';
  

• 重绘：任何导致元素样式变化但不影响几何属性的操作都会触发重绘。例如：

  element.style.color = 'red';
  element.style.backgroundColor = 'blue';
  

4. 如何减少回流和重绘

减少回流和重绘是优化前端性能的重要手段。以下是一些常见的优化策略：

4.1 使用transform和opacity进行动画

• 使用transform和opacity进行动画可以避免触发回流和重绘，因为现代浏览器会将这些操作放在合成层中进行处理，而不影响主线程的布局和绘制。

  element.style.transform = 'translateX(100px)';
  element.style.opacity = '0.5';
  

4.2 避免频繁操作样式

• 避免频繁地直接操作样式属性，可以通过修改class来批量更新样式。

  element.classList.add('new-style');
  

4.3 使用DocumentFragment进行批量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);
  

4.4 避免强制同步布局（Forced Synchronous Layout）

• 避免在读取布局属性（如offsetTop、offsetWidth等）之前进行样式修改，因为这会导致浏览器强制同步布局。

  // 避免这样写
  element.style.width = '100px';
  const width = element.offsetWidth;
  
  // 应该这样写
  const width = element.offsetWidth;
  element.style.width = '100px';
  

4.5 使用will-change属性

• 使用will-change属性可以提前告知浏览器哪些元素可能会发生变化，从而优化渲染性能。

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

4.6 使用requestAnimationFrame进行动画

• 使用requestAnimationFrame进行动画可以确保动画在每一帧开始时执行，从而避免不必要的回流和重绘。

  function animate() {
    element.style.transform = `translateX(${pos}px)`;
    pos += 1;
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
  

5. 总结

回流和重绘是浏览器渲染过程中的重要环节，理解它们的触发机制和优化策略对于提升前端性能至关重要。通过合理使用transform、opacity、DocumentFragment、will-change等技术和工具，可以有效地减少回流和重绘，从而提升页面的渲染性能。