前端性能飞跃！9大高级API实战指南，80%的开发者只知其三

1. requestIdleCallback：利用浏览器空闲时间

作用：在浏览器空闲时执行低优先级任务，避免阻塞主线程。

场景：日志上报、数据预加载、非紧急计算。

javascript 复制代码

function processDataChunk(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    executeTask(tasks.pop());
  }
  if (tasks.length > 0) {
    requestIdleCallback(processDataChunk); // 递归调度
  }
}
requestIdleCallback(processDataChunk);

2. IntersectionObserver：高效实现懒加载

作用：异步监听元素是否进入视口，替代 scroll 事件。

场景：图片懒加载、无限滚动、广告曝光统计。

javascript 复制代码

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src; // 触发加载
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

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

3. WeakMap：避免内存泄漏的利器

作用：弱引用存储对象关联数据，避免内存泄漏。

场景：DOM 节点临时数据存储。

javascript 复制代码

const cache = new WeakMap(); // 键必须是对象！

function setElementData(element, data) {
  cache.set(element, data);
}
// 当element被移除DOM时，关联数据自动被GC回收

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

作用：精准监听元素尺寸变化，告别 resize 事件。

场景：自适应图表、动态文本截断。

javascript 复制代码

const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    adjustChart(entry.contentRect.width); // 根据宽度重绘图表
  });
});
resizeObserver.observe(chartContainer);

5. Web Workers：开启多线程处理

作用：将耗时任务移入后台线程，解放主线程。

场景：大数据处理、加密运算。

javascript 复制代码

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

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

6. requestAnimationFrame：流畅的动画体验

作用：与浏览器刷新率同步执行动画，避免卡顿。

场景：60FPS 动画、Canvas 渲染。

javascript 复制代码

function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 2;
  requestAnimationFrame(animate); // 递归调用实现循环
}
requestAnimationFrame(animate);

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

作用：为 Blob/File 生成临时 URL，避免 FileReader 内存爆炸。

场景：大文件预览、视频即时播放。

javascript 复制代码

const fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = (e) => {
  const url = URL.createObjectURL(e.target.files[0]); // 瞬时生成
  videoElement.src = url;
  // 使用后释放内存！
  videoElement.onend = () => URL.revokeObjectURL(url);
};

8. content-visibility：减少不必要的渲染

作用：跳过视口外元素的渲染，提速 10 倍+。

场景：长列表、复杂后台管理系统。

css 复制代码

.lazy-section {
  content-visibility: auto; /* 仅渲染可见区域 */
  contain-intrinsic-size: 500px; /* 占位高度避免滚动抖动 */
}

9. Fetch API + Streams：流式处理大文件

作用：分块处理大数据，减少内存占用。

场景：大文件下载、实时视频流。

javascript 复制代码

fetch('/large-video.mp4')
  .then(response => {
    const reader = response.body.getReader();
    const processChunk = ({ done, value }) => {
      if (done) return;
      videoBuffer.append(value); // 分块写入缓冲区
      reader.read().then(processChunk);
    };
    reader.read().then(processChunk);
  });

如果你在项目中使用过这些 API，或者有其他性能优化的经验，欢迎在评论区分享交流！