DOM性能优化

DOM操作是前端开发中不可避免的一部分，但频繁或不当的操作可能导致性能问题。理解如何优化DOM性能对构建流畅的用户体验至关重要。

理解DOM操作的成本

每次DOM修改都会触发浏览器的重排（reflow）和重绘（repaint）。例如，修改元素样式时：

// 低效写法：触发多次重排
const element = document.getElementById('myElement');
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';

更高效的方式是使用classList或一次性修改样式：

// 高效写法：只触发一次重排
element.classList.add('active');
// 或
element.style.cssText = 'width:100px; height:200px; left:10px;';

批量DOM修改策略

当需要多次修改DOM时，可以采用以下方法：

1. 文档片段（DocumentFragment）：

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

2. 隐藏元素进行批量操作：

element.style.display = 'none';
// 执行多次DOM操作
element.style.display = 'block';

事件委托优化

为大量子元素绑定事件会消耗内存：

// 低效写法
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handler);
});

// 高效写法：事件委托
document.querySelector('.container').addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    handler(e);
  }
});

高效选择器使用

CSS选择器复杂度影响查询速度：

// 慢速：需要遍历整个DOM
document.querySelector('div.container > ul > li.item');

// 快速：ID选择器最快
document.getElementById('specificItem');

虚拟DOM与差异化更新

现代框架的核心优化原理：

// 伪代码示例
function updateDOM(oldVNode, newVNode) {
  if (oldVNode.tag !== newVNode.tag) {
    // 替换整个节点
  } else {
    // 仅更新变化的属性
    patchAttributes(oldVNode, newVNode);
    // 递归处理子节点
    patchChildren(oldVNode.children, newVNode.children);
  }
}

缓存DOM查询结果

避免重复查询：

// 低效
for (let i = 0; i < 10; i++) {
  document.querySelector('.item').style.color = 'red';
}

// 高效
const item = document.querySelector('.item');
for (let i = 0; i < 10; i++) {
  item.style.color = 'red';
}

动画性能优化

使用transform和opacity属性实现硬件加速：

// 优先使用transform而不是top/left
element.style.transform = 'translateX(100px)';

// 启用GPU加速
element.style.willChange = 'transform';

列表渲染优化

大数据量列表的渲染策略：

// 虚拟滚动实现原理
function renderVisibleItems() {
  const scrollTop = container.scrollTop;
  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = startIdx + visibleItemCount;
  
  items.slice(startIdx, endIdx).forEach(item => {
    // 只渲染可见项
  });
}

内存管理

及时清除不再需要的DOM引用：

// 可能导致内存泄漏
const elements = [];
function createElements() {
  for (let i = 0; i < 1000; i++) {
    elements.push(document.createElement('div'));
  }
}

// 正确做法
function cleanUp() {
  while(elements.length) {
    const el = elements.pop();
    el.parentNode?.removeChild(el);
  }
}

现代API的利用

使用MutationObserver替代轮询：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    // 处理DOM变化
  });
});

observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true
});

渲染层优化

浏览器渲染层创建条件：

// 强制创建独立图层
element.style.transform = 'translateZ(0)';
element.style.backfaceVisibility = 'hidden';

测量布局抖动

避免强制同步布局：

// 布局抖动示例
function resizeAll() {
  const boxes = document.querySelectorAll('.box');
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.width = boxes[i].offsetWidth + 10 + 'px';
  }
}

// 改进方案：先读后写
function resizeAllOptimized() {
  const boxes = document.querySelectorAll('.box');
  const widths = Array.from(boxes).map(box => box.offsetWidth);
  boxes.forEach((box, i) => {
    box.style.width = widths[i] + 10 + 'px';
  });
}

离屏DOM操作

预渲染不可见内容：

const offscreen = document.createElement('div');
offscreen.style.position = 'absolute';
offscreen.style.left = '-9999px';
document.body.appendChild(offscreen);

// 在离屏元素上执行复杂操作
// 完成后插入可视区域
container.appendChild(offscreen);