JavaScript性能优化：减少重绘和回流（Reflow和Repaint）

一、Reflow和Repaint核心原理

1. ‌Reflow（布局重计算）‌：当DOM结构或样式改变影响元素几何属性（如尺寸、位置）时触发，浏览器重新计算布局树。
2. ‌Repaint（重绘）‌：仅当元素外观（如颜色、背景）改变且不影响布局时触发，浏览器重新绘制元素。
3. ‌性能影响‌：Reflow比Repaint耗时3-5倍，频繁触发会导致页面卡顿。

二、减少Reflow的优化策略

2.1 批量操作DOM

// ❌ 低效：循环中频繁插入DOM
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 每次循环触发Reflow
}

// ✅ 高效：DocumentFragment批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // 内存中操作
}
list.appendChild(fragment); // 仅一次Reflow

2.2 读写分离

// ❌ 低效：循环中交替读取和修改
for (let i = 0; i < 1000; i++) {
  const width = element.offsetWidth; // 触发Reflow
  element.style.width = width + 10 + 'px'; // 再次触发
}

// ✅ 高效：先读取后修改
const width = element.offsetWidth; // 读取一次
for (let i = 0; i < 1000; i++) {
  element.style.width = width + 10 + 'px'; // 批量修改
}

2.3 隐藏DOM再操作

// ✅ 高效：隐藏DOM再操作
element.style.display = 'none'; // 触发一次Reflow
// 执行大量DOM操作
element.style.display = 'block'; // 再次触发一次

三、减少Repaint的优化策略

3.1 批量修改样式

// ❌ 低效：逐行修改样式
element.style.color = 'red';
element.style.backgroundColor = 'blue';

// ✅ 高效：使用class或style.cssText
element.className = 'new-style'; // 一次性修改

3.2 避免强制同步布局

// ❌ 低效：读取布局属性
const width = element.offsetWidth; // 触发Reflow
element.style.width = width + 10 + 'px'; // 再次触发

// ✅ 高效：分离读取和写入
const width = element.offsetWidth; // 读取
element.style.width = width + 10 + 'px'; // 写入

3.3 使用transform代替top/left

// ✅ 高效：使用transform
element.style.transform = 'translate(100px, 50px)'; // 不触发Reflow

四、高级优化技巧

4.1 使用requestAnimationFrame

// ✅ 高效：动画循环
function animate() {
  // 动画代码
  requestAnimationFrame(animate);
}

4.2 使用Web Workers

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  // 处理结果
};

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

五、性能检测工具

5.1 Chrome DevTools性能面板

1. 打开DevTools (F12)
2. 切换到"Performance"标签
3. 点击录制按钮开始分析
4. 查看"Main"线程中的"Layout"和"Paint"事件

5.2 性能API

const start = performance.now();
// 执行代码
const end = performance.now();
console.log(`Execution time: ${end - start}ms`);

六、实战案例分析

案例1：列表渲染优化

// ✅ 高效：DocumentFragment批量插入
function renderList(items) {
  const list = document.getElementById('list');
  const fragment = document.createDocumentFragment();
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
  });
  list.appendChild(fragment); // 仅一次Reflow
}

案例2：动画性能优化

// ✅ 高效：requestAnimationFrame
function moveElement(element) {
  let pos = 0;
  const animate = () => {
    element.style.transform = `translateX(${pos}px)`;
    pos += 10;
    if (pos <= 500) requestAnimationFrame(animate);
  };
  requestAnimationFrame(animate);
}

通过实施这些优化策略，可以显著提升JavaScript应用的性能，特别是在处理大量DOM操作时。记住，性能优化是一个持续的过程，需要不断测试和调整以获得最佳效果。