🚀 9个高级前端必会的性能优化 API，你掌握了几个？

在现代 Web 开发中，性能优化已成为衡量开发者水平的重要标准之一。浏览器为我们提供了一系列原生 API，它们低调却强大，合理使用可以显著提升页面性能与用户体验。本文精心整理了 9个高级前端性能优化 API，助你站上性能优化的高地。

1. requestIdleCallback：在空闲时间执行任务

requestIdleCallback 允许开发者在浏览器空闲时执行后台任务，不阻塞主线程，适用于非紧急任务。

适用场景：

• 日志上报、数据同步、预加载资源
• 避免影响 UI 渲染和用户交互
• Web3 应用中的链上数据读取、NFT 元数据预加载等

function doWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    processDataChunk(); // 分片执行任务
    requestIdleCallback(doWork);
  }
}

2. IntersectionObserver：高效监听元素可见性

用于监听元素进入/离开视口的 API，是实现懒加载、滚动加载的利器。

应用场景：

• 图片/组件懒加载
• 无限滚动列表
• CSS 动画触发
• 广告曝光检测

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

document.querySelectorAll('img.lazy-load').forEach(img => {
  observer.observe(img);
});

3. WeakMap：对象关联数据的内存友好方案

WeakMap 允许将对象作为键值关联数据，且不会阻止垃圾回收，是管理临时 DOM 相关数据的利器。

const weakMap = new WeakMap();
weakMap.set(domElement, { hoverCount: 0 }); // DOM 被移除时自动回收关联数据

适用于临时状态缓存、事件数据记录等。

4. ResizeObserver：元素尺寸变化监听器

相比传统的 window.resize，ResizeObserver 可直接监听某个 DOM 元素大小变化。

应用场景：

• 自适应布局调整
• Canvas / SVG 大小适配
• 文本溢出/容器变动处理

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Size:', entry.contentRect.width, entry.contentRect.height);
  }
});
resizeObserver.observe(document.querySelector('#myElement'));

5. Web Workers：多线程执行任务

Web Worker 是浏览器原生的 JS 多线程机制，可将计算密集型任务转移到后台线程处理。

适用场景：

• 大量数据计算
• 文件解析、图像处理
• 区块链数据解析、签名验证

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

6. requestAnimationFrame：动画的最佳拍档

requestAnimationFrame 是进行高性能动画的首选，确保在下一帧刷新时执行，提升流畅度并节省资源。

function animate() {
  updateAnimationFrame(); // 更新动画
  requestAnimationFrame(animate);
}
animate();

适用场景：

• 平移动画、滚动动画
• 进度条、游戏动画等高频渲染

7. URL.createObjectURL：高效处理本地文件

用于将 Blob 或 File 对象生成可直接访问的 URL，适合本地预览大文件、视频、图片等。

const url = URL.createObjectURL(file);
img.src = url;

// 使用后释放资源
URL.revokeObjectURL(url);

对比 base64 编码的方式，内存消耗更低、速度更快。

8. content-visibility：让不可见内容“隐身”

CSS 属性 content-visibility: auto; 可跳过不可见 DOM 的渲染计算，极大提升滚动性能。

.long-list-item {
  content-visibility: auto;
}

推荐使用场景：

• 长列表组件（消息流、新闻流）
• 懒加载卡片、嵌套内容

9. Fetch API + Streams：流式加载优化体验

通过 ReadableStream 实现数据边加载边解析，减少等待时间，适用于大文件或 SSR。

fetch('/large.json').then(res => {
  const reader = res.body.getReader();
  reader.read().then(({ value, done }) => {
    console.log("读取部分内容:", value);
  });
});

典型场景：

• 视频/音频分片加载
• JSON 数据流渲染（用于 React SSR / Vue SSR）

✅ 总结

⚠️ 掌握这些 API，不仅可以优化性能，还能让你写出更现代、更专业的前端代码。建议逐一尝试实战应用，理解其行为与优势。