JavaScript 性能优化方法

减少 DOM 操作

频繁的 DOM 操作会导致浏览器重绘和回流，影响性能。使用文档片段（DocumentFragment）或虚拟 DOM 技术减少直接操作。

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

事件委托

减少事件监听器的数量，利用事件冒泡机制将事件处理程序委托到父元素。

document.getElementById('parent').addEventListener('click', function(e) {
  if (e.target.matches('li')) {
    console.log('List item clicked');
  }
});

避免全局查找

将全局变量缓存到局部变量中，减少作用域链查找时间。

function updateElements() {
  const doc = document; // 缓存全局变量
  const divs = doc.getElementsByTagName('div');
  // 后续操作
}

使用节流和防抖

对于频繁触发的事件（如滚动、输入），使用节流（throttle）和防抖（debounce）限制执行频率。

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), delay);
  };
}

优化循环

减少循环中的计算量，避免在循环中执行 DOM 操作或重复计算。

// 预先计算数组长度
const arr = [1, 2, 3];
const len = arr.length;
for (let i = 0; i < len; i++) {
  console.log(arr[i]);
}

使用 Web Workers

将 CPU 密集型任务放到 Web Workers 中执行，避免阻塞主线程。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
  console.log(e.data);
};

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

代码压缩和懒加载

使用工具如 Webpack 或 Rollup 进行代码压缩和分割，按需加载资源。

// 动态导入实现懒加载
import('./module.js').then(module => {
  module.init();
});

避免内存泄漏

及时清除定时器、事件监听器和引用，防止内存泄漏。

// 清除定时器
const timer = setInterval(() => {}, 1000);
clearInterval(timer);

// 移除事件监听器
element.removeEventListener('click', handler);

使用性能分析工具

借助 Chrome DevTools 的 Performance 和 Memory 面板，定位性能瓶颈。

console.time('test');
// 测试代码
console.timeEnd('test');