JavaScript性能优化实战

1. 减少DOM操作

DOM操作非常消耗性能，应尽量减少：

// 差 - 多次DOM操作
for (let i = 0; i < 100; i++) {
  document.getElementById('list').innerHTML += `<li>${i}</li>`;
}

// 优 - 使用文档片段批量操作
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

2. 事件委托

减少事件监听器数量：

// 差 - 为每个元素添加监听器
document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', handleClick);
});

// 优 - 使用事件委托
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    handleClick(e);
  }
});

3. 防抖和节流

优化高频触发的事件：

// 防抖 - 最后一次触发后执行
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

// 节流 - 固定间隔执行
function throttle(fn, interval) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

// 使用示例
window.addEventListener('resize', debounce(handleResize, 200));

4. 使用Web Workers处理耗时任务

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

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

5. 内存管理

避免内存泄漏：

// 差 - 可能导致内存泄漏
function setup() {
  const element = document.getElementById('element');
  element.addEventListener('click', onClick);
}

// 优 - 及时清理
function setup() {
  const element = document.getElementById('element');
  element.addEventListener('click', onClick);
  
  // 清理时
  return () => {
    element.removeEventListener('click', onClick);
  };
}

6. 使用requestAnimationFrame优化动画

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

7. 代码拆分和懒加载

// 动态导入
button.addEventListener('click', async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
});

8. 使用性能更好的API

// 差 - 使用forEach
array.forEach(item => process(item));

// 优 - 使用for循环
for (let i = 0; i < array.length; i++) {
  process(array[i]);
}

9. 避免强制同步布局

// 差 - 强制同步布局
function resizeAll() {
  const boxes = document.querySelectorAll('.box');
  boxes.forEach(box => {
    box.style.width = box.offsetWidth + 10 + 'px';
  });
}

// 优 - 批量读取和写入
function resizeAll() {
  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';
  });
}

10. 使用WebAssembly处理计算密集型任务

// 加载并运行WebAssembly模块
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(obj => {
    const result = obj.instance.exports.compute(42);
    console.log(result);
  });