JavaScript性能优化实战

减少DOM操作

频繁操作DOM会导致重绘和回流，消耗性能。使用文档片段（DocumentFragment）或离线DOM进行批量操作。缓存DOM查询结果，避免重复查询。

javascript 复制代码

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

事件委托

减少事件监听器数量，通过事件冒泡机制在父元素上统一处理子元素事件。适合动态生成的元素或大量同类元素。

javascript 复制代码

document.getElementById('parent').addEventListener('click', (e) => {
  if (e.target.classList.contains('child')) {
    // 处理子元素逻辑
  }
});

防抖与节流

高频事件（如滚动、输入）通过防抖（Debounce）和节流（Throttle）减少函数调用次数。防抖在连续触发时只执行最后一次，节流固定时间间隔执行一次。

javascript 复制代码

// 防抖实现
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

避免全局变量

全局变量会长期占用内存，增加命名冲突风险。使用模块化（ES6 Module）或闭包封装变量，减少全局污染。

javascript 复制代码

// 模块化示例
const utils = (function() {
  const privateVar = 'hidden';
  return { publicMethod: () => console.log(privateVar) };
})();

异步加载与懒加载

非关键资源通过异步加载（如async或defer）或懒加载（Intersection Observer）延迟执行。动态导入模块使用import()语法。

javascript 复制代码

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

内存管理

及时解除无用引用，避免内存泄漏。定时器、事件监听器在组件卸载时清理。使用弱引用（WeakMap/WeakSet）管理临时数据。

javascript 复制代码

// 清理定时器
let timer = setInterval(() => {}, 1000);
// 组件卸载时
clearInterval(timer);

代码分割与Tree Shaking

通过Webpack/Rollup等工具将代码拆分为按需加载的块（Chunk）。启用Tree Shaking移除未使用的代码，减少打包体积。

javascript 复制代码

// Webpack动态导入
const lazyComponent = () => import('./LazyComponent.vue');

优化循环与算法

减少循环嵌套，优先使用for或while而非forEach。算法复杂度控制在O(n)或O(log n)，避免O(n²)操作。

javascript 复制代码

// 使用更快的循环
for (let i = 0, len = array.length; i < len; i++) {
  // 处理逻辑
}

使用Web Worker

将密集型计算（如数据处理、图像渲染）移至Web Worker线程，避免阻塞主线程。通过postMessage通信。

javascript 复制代码

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

性能监控与分析

使用performance API测量关键指标（FP、FCP、LCP）。借助Chrome DevTools的Performance面板分析瓶颈，优先优化长任务（>50ms）。

javascript 复制代码

// 测量执行时间
const start = performance.now();
// 执行代码
const duration = performance.now() - start;