深入理解浏览器重排（Reflow）与重绘（Repaint）及性能优化策略

引言

在现代Web开发中，性能优化是一个永恒的话题。理解浏览器的渲染机制，特别是重排（Reflow）和重绘（Repaint）过程，对于构建高性能的Web应用至关重要。本文将深入探讨这两个概念，分析它们对性能的影响，并提供一系列实用的优化策略。

一、浏览器渲染流程概述

在深入重排和重绘之前，我们需要了解浏览器如何将HTML、CSS和JavaScript转换为用户可见的像素：

1. 解析HTML：构建DOM树
2. 解析CSS：构建CSSOM树
3. 合并DOM和CSSOM：形成渲染树（Render Tree）
4. 布局（Layout） ：计算每个节点的确切位置和大小（即重排）
5. 绘制（Paint） ：将渲染树转换为屏幕上的实际像素（即重绘）
6. 合成（Composite） ：将各层合并显示在屏幕上

二、重排（Reflow）与重绘（Repaint）详解

1. 什么是重排(回流)？

重排还可以叫做回流，重排是指浏览器重新计算元素的位置和几何属性，导致渲染树的部分或全部需要重新构建的过程。重排必定引发后续的重绘。

触发重排的常见操作：

• 添加或删除DOM元素
• 元素位置、尺寸变化（width, height, margin, padding, border等）
• 内容变化（文本变化或图片大小变化）
• 页面初始渲染
• 浏览器窗口大小改变
• 计算offsetWidth、offsetHeight等布局信息

2. 什么是重绘？

重绘是指当元素的外观属性（如颜色、背景、边框等）发生变化，但不影响布局时，浏览器只需重新绘制受影响区域的过程。

触发重绘的常见操作：

• 颜色变化（color, background-color等）
• 边框样式变化（border-style, border-radius等）
• 可见性变化（visibility）
• 阴影变化（box-shadow, text-shadow）

3. 性能影响对比

重排的成本远高于重绘，因为重排会导致浏览器重新计算所有受影响元素的几何属性，然后触发重绘。而重绘只涉及像素的重新绘制，不涉及布局计算。

三、减少重排和重绘的优化策略

1. 集中修改样式

问题：频繁单独修改DOM样式会导致多次重排/重绘

// 不好的做法 - 多次重排
const element = document.getElementById('my-element');
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';

优化：使用classList或cssText一次性修改。创建一个样式类，将这个类直接挂载到相应的元素上面，或者一次性直接修改所有的样式。

// 好的做法 - 一次重排
const element = document.getElementById('my-element');
element.classList.add('new-style');

// 或
element.style.cssText = 'width: 100px; height: 200px; margin: 10px;';

2. 使用文档片段（DocumentFragment）

问题：直接多次添加DOM节点会导致多次重排

// 不好的做法
const list = document.getElementById('my-list');
for (let i = 0; i < 10; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item);
}

优化：使用DocumentFragment批量操作。先创建一个父节点，然后将li标签都挂载在这个父节点上，最后将父节点添加到页面中，这样就只会触发一次重排，而不是像上面一样挂载一个li标签就触发一次重排。

// 好的做法
const list = document.getElementById('my-list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}

list.appendChild(fragment); // 仅一次重排

3. 脱离文档流进行复杂操作

策略：将元素从文档流中临时移除，完成修改后再放回，可以用下面这种方法，当然也可以将position的属性设置为flex或absolute，只要是可以脱离文本流就可以了。

const element = document.getElementById('my-element');
const parent = element.parentNode;

// 从文档流中移除
parent.removeChild(element);

// 进行复杂修改...
element.style.width = '500px';
// 更多样式修改...

// 重新插入文档流
parent.appendChild(element);

4. 避免频繁读取布局属性

问题：强制同步布局（Layout Thrashing）是指JavaScript强制浏览器提前执行布局操作

// 不好的做法 - 强制同步布局
const elements = document.getElementsByClassName('my-class');
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + 'px';
}

优化：批量读取和写入

// 好的做法
const elements = document.getElementsByClassName('my-class');
const widths = [];

// 先批量读取
for (let i = 0; i < elements.length; i++) {
  widths[i] = elements[i].offsetWidth;
}

// 再批量写入
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = widths[i] + 10 + 'px';
}

5. 使用CSS3硬件加速

现代浏览器可以使用GPU加速某些CSS属性，这些属性的变化通常不会触发重排，有时甚至不会触发重绘，而是直接在合成层处理。

优化属性：

• transform
• opacity
• filter
• will-change

.animated-element {
  transition: transform 0.3s ease;
  will-change: transform;
}

.animated-element:hover {
  transform: scale(1.1);
}

6. 合理使用display: none

当需要对元素进行多次操作时，可以暂时将其设为display: none，操作完成后再显示。

const element = document.getElementById('my-element');
element.style.display = 'none';

// 进行多次修改...
element.style.width = '100px';
element.style.height = '200px';
// 更多修改...

element.style.display = 'block'; // 仅一次重排

7. 减少表格布局的使用

表格布局通常会导致更频繁和更昂贵的重排，因为表格中的任何变化都可能影响整个表格的布局。

8. 优化动画

问题：使用top/left等属性实现的动画会触发重排和重绘

优化：使用transform和opacity实现动画

/* 不好的做法 */
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

/* 好的做法 */
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

9. 使用虚拟DOM技术

现代前端框架（如React、Vue等）使用虚拟DOM来最小化DOM操作。虚拟DOM通过在内存中构建DOM树的抽象表示，然后与实际DOM进行比较，最终只应用必要的更改。

10. 使用requestAnimationFrame进行视觉变化

对于需要频繁更新的视觉变化，使用requestAnimationFrame可以确保变化在浏览器的最佳时机执行。

function animate() {
  // 执行动画代码
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

11. 避免使用表格布局

表格布局通常会导致更频繁和更昂贵的重排，因为表格中的任何变化都可能影响整个表格的布局。

12. 使用Flexbox或Grid布局

现代布局技术（Flexbox和Grid）通常比传统浮动布局具有更好的性能特征，尤其是在动态内容场景下。

13. 限制影响范围

通过缩小样式变化的影响范围来减少重排成本：

• 避免在根元素上修改字体大小
• 尽可能将动画元素设置为position: absolute或position: fixed，使其脱离文档流

14. 使用防抖和节流技术

对于可能频繁触发重排的事件（如resize、scroll），使用防抖（debounce）或节流（throttle）技术来减少处理频率。

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

window.addEventListener('resize', debounce(() => {
  // 处理resize事件
}, 250));

15. 使用CSS精灵图

减少HTTP请求的同时，也减少了图片加载完成后的重排和重绘。

四、性能检测工具

1. Chrome DevTools Performance面板：记录和分析运行时性能

2. Chrome DevTools Rendering面板：

   • Paint flashing：高亮显示重绘区域
   • Layout Shift Regions：显示布局偏移区域

3. React DevTools：分析React组件更新

4. Lighthouse：全面的性能审计工具

五、总结

减少重排和重绘是Web性能优化的重要方面。通过本文介绍的15种优化策略，开发者可以显著提高页面渲染性能：

1. 集中修改样式
2. 使用文档片段
3. 脱离文档流进行复杂操作
4. 避免频繁读取布局属性
5. 使用CSS3硬件加速
6. 合理使用display: none
7. 减少表格布局的使用
8. 优化动画实现
9. 使用虚拟DOM技术
10. 使用requestAnimationFrame
11. 避免表格布局
12. 使用Flexbox/Grid布局
13. 限制样式变化影响范围
14. 使用防抖和节流
15. 使用CSS精灵图

记住，性能优化是一个平衡的过程，应该在代码可维护性和性能之间找到适当的平衡点。在实施任何优化之前，始终先测量性能瓶颈，有针对性地进行优化。