JavaScript 性能优化实战：核心技巧与最佳实践

方案二：Web Worker 搬离主线程 对于 CPU 密集型任务（如大数据解析、加密），直接创建 Worker。

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

// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeData);
worker.onmessage = e => console.log('结果:', e.data);

2. 函数防抖与节流

高频事件（如滚动、输入）若不加控制，会频繁触发回调拖垮性能。

防抖（Debounce）：只执行最后一次调用，适合搜索框输入。

function debounce(fn, delay = 300) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
input.addEventListener('input', debounce(() => {
  search(input.value);
}, 500));

节流（Throttle）：固定频率执行，适合滚动监听。

function throttle(fn, limit = 100) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
window.addEventListener('scroll', throttle(handleScroll, 100));

3. 避免重排（Reflow）与重绘（Repaint）

DOM 变动会触发浏览器重新布局和绘制，代价极高。避免在循环中读写样式属性。

// ❌ 危险操作：频繁读写样式
for (let i = 0; i < items.length; i++) {
  items[i].style.left = i * 10 + 'px';
  items[i].style.top = computeExpensivePosition(items[i]);
}

优化策略：

1. 批量修改 DOM：使用 DocumentFragment。
2. 样式集中设置：用 class 替代频繁 style 修改。
3. 启用硬件加速：利用 GPU 渲染。

/* CSS */
.transform-fast {
  transform: translateZ(0); /* 或 will-change: transform */
}

4. 内存管理与泄漏防范

内存泄漏往往源于全局变量滥用、未解绑事件或闭包引用过大对象。

实战：使用 WeakMap 缓存

const cache = new WeakMap();
function getCachedData(obj, key) {
  if (!cache.has(obj)) {
    cache.set(obj, new Map());
  }
  return cache.get(obj).get(key);
}
// 当 obj 被回收时，缓存也会被自动清理

5. 代码分割与懒加载

按需加载模块和素材，减少首屏资源体积。

动态导入

button.addEventListener('click', async () => {
  const { modal } = await import('./modal.js');
  modal.show();
});

图片懒加载

const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imgObserver.unobserve(img);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => {
  imgObserver.observe(img);
});

6. 构建工具级优化

运行时写得好，打包不好也白搭。推荐配置如下：

性能检测工具推荐

使用建议：

• 开发阶段：DevTools + Lighthouse
• 上线前：WebPageTest + Bundle 分析
• 上线后：Sentry + RUM（Real User Monitoring）

实战案例：优化一个慢速表格渲染

初始问题：

• 渲染 10,000 行表格 → 卡死 5 秒
• 滚动卡顿 → FPS < 10

优化步骤：

1. 虚拟滚动：只渲染可视区域内的行，可使用 react-window 或 vue-virtual-scroller。
2. 分页或懒加载：结合防抖实现。
3. 平滑滚动：使用 transform 配合 will-change。

最终效果：

• 初始渲染 < 100ms
• 滚动流畅，FPS ≥ 60

最佳实践清单

✅ 每个项目都应该检查这些点：

延伸学习资源

• 书籍：《高性能 JavaScript》Nicholas C. Zakas、《You Don't Know JS》系列
• 官方文档：MDN Performance、web.dev/fast
• 视频：Google I/O 关于 V8 优化的演讲、React Conf 虚拟列表实现原理

性能优化是一个持续迭代的过程。掌握上述核心技巧，结合具体业务场景灵活应用，才能打造出真正流畅的 Web 体验。