减少DOM操作与重绘

理解DOM操作与重绘的代价

DOM操作是前端开发中最常见的任务之一，但频繁操作DOM会导致性能问题。浏览器渲染引擎需要重新计算布局（reflow）和重新绘制（repaint），这两个过程非常消耗资源。每次修改DOM元素样式或结构时，浏览器都需要重新计算受影响元素的几何属性，然后更新渲染树。

// 低效的DOM操作示例
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  document.body.appendChild(div);
}

批量处理DOM修改

减少DOM操作最有效的方法是批量处理修改。浏览器提供了文档片段（DocumentFragment）作为轻量级的DOM容器，可以在内存中构建DOM结构，然后一次性插入到文档中。

// 使用DocumentFragment优化
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

另一种方法是隐藏元素（设置display:none），进行多次修改后再显示元素。这样在修改期间不会触发重绘。

使用CSS类代替样式修改

直接修改元素的style属性会立即触发重绘。更好的做法是预定义CSS类，然后通过切换类名来改变样式。

/* CSS定义 */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

// 通过类名修改样式
element.classList.add('highlight');

对于复杂动画，使用CSS的transform和opacity属性，因为它们可以在不触发重排的情况下实现高性能动画。

虚拟DOM与差异化更新

现代前端框架如React、Vue都采用虚拟DOM技术。它们先在内存中构建虚拟DOM树，然后与实际DOM比较差异，最后只更新必要的部分。

// React示例
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

即使不使用框架，也可以实现类似的优化策略：先计算所有变更，然后一次性应用到DOM上。

优化事件处理

频繁触发的事件（如scroll、resize、mousemove）容易导致性能问题。可以使用防抖（debounce）或节流（throttle）技术减少事件处理频率。

// 节流实现
function throttle(func, limit) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('resize', throttle(handleResize, 100));

使用requestAnimationFrame优化动画

对于JavaScript动画，使用requestAnimationFrame而不是setTimeout或setInterval。它会自动与浏览器刷新率同步，避免不必要的重绘。

function animate() {
  // 动画逻辑
  element.style.transform = `translateX(${position}px)`;
  
  if (position < 500) {
    position += 5;
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

减少布局抖动

布局抖动发生在连续读取和写入DOM布局属性时，导致浏览器被迫多次重新计算布局。可以通过批量读取属性，然后批量修改来避免。

// 不好的做法 - 导致布局抖动
for (let i = 0; i < items.length; i++) {
  items[i].style.width = items[i].offsetWidth + 10 + 'px';
}

// 优化后的做法
const widths = items.map(item => item.offsetWidth);
for (let i = 0; i < items.length; i++) {
  items[i].style.width = widths[i] + 10 + 'px';
}

使用现代CSS布局技术

Flexbox和Grid布局比传统浮动布局更高效，它们可以减少不必要的嵌套层级和复杂的CSS计算。

/* 使用Flexbox替代浮动布局 */
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
}

利用浏览器开发者工具

现代浏览器开发者工具提供了性能分析功能，可以识别导致过多重绘和重排的代码。

1. 使用Performance面板记录页面活动
2. 检查Layout和Paint事件
3. 使用Rendering面板中的Paint flashing功能可视化重绘区域

缓存DOM查询结果

重复查询DOM元素是常见的性能瓶颈。应该将DOM查询结果存储在变量中供后续使用。

// 不好的做法
for (let i = 0; i < 100; i++) {
  document.querySelector('.item').style.color = 'red';
}

// 优化后的做法
const item = document.querySelector('.item');
for (let i = 0; i < 100; i++) {
  item.style.color = 'red';
}

使用CSS containment

CSS的contain属性可以告诉浏览器某个元素的子树独立于文档其余部分，允许浏览器优化渲染。

.widget {
  contain: layout paint style;
}

这个属性特别适合用于频繁更新的独立组件，如聊天消息、通知等。

避免表格布局

表格布局会强制浏览器等待整个表格加载完成才能渲染，导致性能问题。对于非表格数据，应该使用其他布局方式。

<!-- 避免不必要的表格布局 -->
<div class="grid">
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
  </div>
</div>

优化图片和媒体资源

未优化的图片会导致布局变化和重绘。应该：

• 使用正确的图片尺寸
• 使用懒加载
• 考虑使用WebP等现代格式
• 为图片设置固定宽高比

<img src="image.jpg" loading="lazy" width="800" height="600" alt="示例图片">

使用Web Workers处理复杂计算

将耗时的JavaScript计算移到Web Worker中可以避免阻塞主线程，减少界面卡顿。

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

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

合理使用will-change

will-change属性可以提示浏览器哪些属性可能会变化，让浏览器提前做好准备。

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

但不应过度使用，只应用于确实会频繁变化的元素。