9个高级前端必会的性能优化API你都知道几个？

以下是9个高级前端必会的性能优化API：

• requestIdleCallback

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

  使用场景：日志上报、数据同步、预加载（如Web3 DApp的NFT预加载）。

  优势：通过deadline.timeRemaining()分块处理任务，避免卡顿。

  示例：

  function doWork(deadline) { while (deadline.timeRemaining() > 0) processDataChunk(); requestIdleCallback(doWork);}

• IntersectionObserver

  作用：异步观察元素与视口的交集变化，无需频繁计算布局。

  使用场景：懒加载、无限滚动、广告曝光统计、动画触发。

  优势：避免传统滚动事件监听导致的布局抖动。

  示例：

  const observer = new IntersectionObserver((entries) => { entries.forEach(entry => entry.isIntersecting && loadImage(entry.target));});

• WeakMap

  作用：以对象为键的弱引用Map，存储临时数据且不阻止垃圾回收。

  使用场景：关联DOM元素与数据，避免内存泄漏（如element移除后自动回收）。

  示例：

  const weakMap = new WeakMap();weakMap.set(element, { count: 0 }); // element移除后数据自动GC

• ResizeObserver

  作用：监听元素尺寸变化，替代window.resize事件。

  使用场景：响应式布局、动态文本溢出检测、Canvas/SVG适配。

  优势：精准检测单个元素尺寸变化，减少不必要的计算。

  示例：

  const observer = new ResizeObserver((entries) => { entries.forEach(entry => console.log(entry.contentRect.width));});observer.observe(document.getElementById('myElement'));

• Web Workers

  作用：多线程运行JavaScript，避免主线程阻塞。

  使用场景：复杂计算（如数据处理、图像渲染）、后台任务。

  示例：

  const worker = new Worker('processor.js');worker.postMessage(data); // 主线程发送数据worker.onmessage = (e) => updateUI(e.data); // 接收结果

• requestAnimationFrame

  作用：在下一帧渲染前执行回调，优化动画性能。

  使用场景：CSS动画、JavaScript动画、滚动效果。

  优势：与浏览器刷新率同步，减少卡顿。

  示例：

  function animate() { element.style.left = (pos += 2) + 'px'; requestAnimationFrame(animate); // 递归调用}

• URL.createObjectURL

  作用：创建Blob/File对象的临时URL，用于本地预览或下载。

  使用场景：大文件预览（如图片、视频）、避免Base64内存膨胀。

  注意：需手动调用URL.revokeObjectURL()释放内存。

  示例：

  const url = URL.createObjectURL(file);img.src = url; // 瞬时加载

• content-visibility

  作用：CSS属性，隐藏非视口元素，减少渲染负担。

  使用场景：长列表（如消息流、新闻列表）、静态内容较多的页面。

  示例：

  .lazy-load { content-visibility: auto; }

• Fetch API + Streams

  作用：支持流式传输，分块处理响应数据。

  使用场景：大文件下载（如视频）、JSON流解析、SSR流式渲染。

  优势：减少内存占用和等待时间。

  示例：

  fetch('/large-file').then(response => { const reader = response.body.getReader(); reader.read().then(({ value }) => console.log(value)); // 分块处理});

总结：这些API覆盖了任务调度、资源加载、渲染优化、多线程处理等关键性能场景，合理使用可显著提升前端应用的流畅度和资源利用率。