JavaScript性能优化

JavaScript 性能优化方法

减少重绘和回流
频繁操作 DOM 会导致浏览器反复计算布局，引发性能问题。使用 documentFragment 进行批量 DOM 操作，或通过 classList 一次性修改多个样式属性。缓存 DOM 查询结果，避免重复访问。

事件委托
利用事件冒泡机制，将事件监听器绑定到父元素而非多个子元素。减少内存占用，提升动态内容的事件处理效率。

节流与防抖
高频事件（如滚动、输入）通过节流（Throttle）限制执行频率，防抖（Debounce）延迟执行直到操作停止。示例代码：

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
  };
}

代码拆分与懒加载
使用动态 import() 实现按需加载模块。结合 Webpack 的 splitChunks 配置拆分代码，减少初始加载时间。

Web Worker 处理耗时任务
将计算密集型任务（如数据解析）移至 Web Worker，避免阻塞主线程。示例：

const worker = new Worker('task.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

避免内存泄漏
及时移除无用的事件监听器和定时器。使用 WeakMap 或 WeakSet 管理对象引用，防止意外保留内存。

优化循环与算法
减少循环嵌套，优先使用 for 而非 forEach 处理大数据量。选择时间复杂度更优的算法（如用哈希表替代线性搜索）。

利用性能分析工具
使用 Chrome DevTools 的 Performance 和 Memory 面板检测瓶颈。Lighthouse 提供全面的优化建议，包括 JavaScript 执行效率。