让你的 JavaScript 飞起来——性能优化实战案例

1. 高频事件防抖与节流

问题场景

滚动事件、窗口大小调整事件或连续点击按钮时频繁触发回调

优化方案

// 防抖（最后一次触发后执行）
function debounce(func, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 节流（固定间隔执行）
function throttle(func, limit = 300) {
  let lastRun;
  return (...args) => {
    if (!lastRun || (Date.now() - lastRun >= limit)) {
      func.apply(this, args);
      lastRun = Date.now();
    }
  };
}

2. 虚拟滚动优化长列表

问题场景

渲染 10,000+ 条数据的列表时卡顿

优化方案

// 仅渲染可见区域内容
const VirtualList = ({ items, itemHeight, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight),
    items.length
  );

  return (
    <div onScroll={e => setScrollTop(e.target.scrollTop)}>
      <div style={{ height: items.length * itemHeight }}>
        {items.slice(startIndex, endIndex).map((item, i) => (
          <div key={i} style={{ 
            height: itemHeight,
            transform: `translateY(${(startIndex + i) * itemHeight}px)`
          }}>
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
};

3. Web Workers 处理密集型计算

问题场景

大数据量加密/解密操作导致主线程阻塞

优化方案

// main.js
const worker = new Worker('crypto-worker.js');
worker.postMessage({ data: largeData, key: secretKey });
worker.onmessage = (e) => handleResult(e.data);

// crypto-worker.js
self.onmessage = (e) => {
  const result = heavyCryptoOperation(e.data.data, e.data.key);
  self.postMessage(result);
};

4. 图片懒加载优化

问题场景

页面包含 50+ 图片导致首屏加载缓慢

优化方案

<img data-src="image.jpg" class="lazyload">

<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));
</script>

5. 代码分割与动态加载

问题场景

单页面应用首次加载时间过长

优化方案

// 动态导入
const loadModule = async () => {
  const { heavyFunction } = await import('./heavyModule.js');
  heavyFunction();
};

// React 路由懒加载
const About = React.lazy(() => import('./About'));
<Suspense fallback={<Loader />}>
  <About />
</Suspense>

优化效果验证工具

• Chrome DevTools Performance 面板
• Lighthouse 性能评分
• Webpack Bundle Analyzer
• Memory Profiler

总结建议

1. 优先解决关键渲染路径的阻塞问题
2. 使用 requestAnimationFrame 优化动画性能
3. 避免内存泄漏（及时清除定时器/事件监听）
4. 对复杂数据操作使用 WebAssembly
5. 合理使用缓存（Memoization、Service Worker）

请根据实际项目需求选择合适的优化方案，并使用性能分析工具验证优化效果。不同场景可能需要组合使用多种优化策略。