如何最小化重绘和回流

在前端开发中，重绘（Repaint） 和 回流（Reflow） 是影响性能的两大关键因素。以下是系统化的优化策略，结合代码示例和原理说明：

一、理解核心概念

重绘 (Repaint)	回流 (Reflow)
元素外观变化（颜色、背景等）	布局变化（尺寸、位置、内容等）
不影响布局	触发重新计算布局树
性能消耗较低	性能消耗高（可能触发连锁反应）

二、高效操作 DOM 的 8 个核心原则

1. 批量读写操作

避免「读-改-读-改」交替操作，利用浏览器队列优化机制：

javascript 复制代码

// ❌ 低效（触发多次回流）
const width = el.offsetWidth; // 读
el.style.width = width + 10 + 'px'; // 写
const height = el.offsetHeight; // 读
el.style.height = height + 10 + 'px'; // 写

// ✅ 高效（批量读写）
const width = el.offsetWidth; // 读
const height = el.offsetHeight; // 读
el.style.width = width + 10 + 'px'; // 写
el.style.height = height + 10 + 'px'; // 写

2. 使用文档片段（DocumentFragment）

减少实时 DOM 操作次数：

javascript 复制代码

const fragment = document.createDocumentFragment();

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

document.body.appendChild(fragment); // 仅一次回流

3. 离线 DOM 操作

通过 display: none 或克隆节点进行批量修改：

javascript 复制代码

// 方法1：隐藏元素
el.style.display = 'none';
// ...执行多次修改
el.style.display = 'block';

// 方法2：克隆修改
const clone = el.cloneNode(true);
// ...修改 clone
el.parentNode.replaceChild(clone, el);

4. 避免逐项修改样式

使用 class 或 cssText 批量更新：

javascript 复制代码

// ❌ 低效
el.style.width = '100px';
el.style.height = '200px';

// ✅ 高效
el.className += ' new-style'; // 通过 CSS 类批量定义

// 或使用 cssText
el.style.cssText += 'width:100px; height:200px;';

三、CSS 优化策略

1. 避免触发回流的 CSS 属性

优先使用不影响布局的属性：

css 复制代码

/* ✅ 安全属性（仅重绘） */
color, background, text-shadow, opacity, transform...

/* ❌ 高危属性（触发回流） */
width, height, margin, padding, top, left, font-size...

2. 使用 CSS3 硬件加速

通过 transform 和 opacity 触发 GPU 加速：

css 复制代码

.animate-element {
  transform: translateZ(0); /* 或 translate3d(0,0,0) */
  will-change: transform;   /* 提前告知浏览器 */
}

3. 避免使用 Table 布局

Table 的嵌套层级深，小改动可能引发全局回流。

四、JavaScript 进阶技巧

1. 缓存布局信息

javascript 复制代码

// ❌ 每次访问都触发回流
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = box.offsetWidth + 'px';
}

// ✅ 缓存值
const width = box.offsetWidth; // 仅一次回流
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = width + 'px';
}

2. 使用虚拟滚动处理长列表

仅渲染可视区域内容（React/Vue 生态常用方案）。

3. 防抖/节流高频操作

javascript 复制代码

function handleResize() {
  // 布局相关操作
}

// 使用防抖控制频率
window.addEventListener('resize', debounce(handleResize, 200));

五、现代浏览器优化机制

1. 队列化（Queueing）机制

现代浏览器会将回流操作放入队列，但以下情况会强制刷新队列：

javascript 复制代码

offsetTop/Left/Width/Height
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()

2. FastDOM 库

强制批量操作的辅助工具：

javascript 复制代码

fastdom.measure(() => {
  const width = element.offsetWidth;
  fastdom.mutate(() => {
    element.style.width = width + 'px';
  });
});

六、性能分析工具

Chrome DevTools - Performance 面板
- 录制操作过程，分析回流/重绘事件
- 查看 "Layout Shift" 指标

Layout Instability API

javascript 复制代码

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('布局偏移:', entry);
  }
}).observe({ type: 'layout-shift', buffered: true });

总结：优化层次模型

避免不必要的 DOM 操作 → 减少触发源
批量操作 → 最小化回流次数
使用 CSS 代替 JS 动画 → 利用浏览器优化
硬件加速 → 降低绘制成本
监控与分析 → 定位性能瓶颈