关于JavaScript性能优化

核心优化方向

减少重绘与回流

• 使用 transform 和 opacity 替代直接修改 width 或 height
• 批量 DOM 操作通过 DocumentFragment 或离线 DOM 处理
• 使用 will-change 属性提示浏览器优化

代码执行效率

• 避免在循环中频繁操作 DOM 或进行复杂计算
• 使用 requestAnimationFrame 替代 setTimeout 处理动画
• 利用 Web Workers 处理密集型任务

内存管理策略

避免内存泄漏

• 及时解除事件监听（如 removeEventListener）
• 避免意外的全局变量（如未声明的变量赋值）
• 使用弱引用（WeakMap/WeakSet）管理临时数据

垃圾回收优化

• 手动释放对象引用（如 obj = null）
• 减少闭包的不必要使用

网络与加载优化

资源加载策略

• 异步加载脚本（async/defer 属性）
• 代码分割（动态 import() 或工具如 Webpack 的 splitChunks）
• 预加载关键资源（<link rel="preload">）

数据请求优化

• 合并 API 请求减少 HTTP 开销
• 使用缓存（如 localStorage 或 Service Worker）
• 压缩传输数据（如 JSON 转为 Protocol Buffers）

工具与监控

性能分析工具

• Chrome DevTools 的 Performance 和 Memory 面板
• Lighthouse 生成优化报告
• 使用 console.time 和 console.timeEnd 定位耗时操作

持续监控

• 注入性能指标上报（如 FP、FCP、LCP）
• 异常监控（如 window.onerror 捕获运行时错误）

代码示例

防抖与节流实现

// 防抖（延迟执行）
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// 节流（固定频率执行）
function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn(...args);
      lastTime = now;
    }
  };
}

使用 Web Workers 处理计算

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

// worker.js
self.onmessage = (e) => {
  const result = e.data.data.reduce((sum, val) => sum + val, 0);
  self.postMessage({ result });
};