提升前端性能的 几个高级 API

#一、requestIdleCallback：巧用浏览器空闲时光

当浏览器忙碌于渲染、响应等关键任务时，低优先级任务若贸然插队，极易引发卡顿。requestIdleCallback 应运而生，它能让任务在浏览器闲暇之际执行。

它适用于日志上报等场景。借助以下代码，可以高效调度任务：

复制function processDataChunk(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    executeTask(tasks.pop());
  }
  if (tasks.length > 0) {
    requestIdleCallback(processDataChunk);
  }
}
requestIdleCallback(processDataChunk);

这就像在喧嚣的火车站，巧妙地利用等候间隙，迅速而优雅地完成额外任务。

#二、IntersectionObserver：智能洞察元素与视口的邂逅

过去，开发者常依赖 scroll 事件监听元素是否进入视口，但这种方式频繁触发，性能损耗巨大。IntersectionObserver 以其异步、高效的特性，完美解决了图片懒加载等场景的问题。

复制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));

它如同一位敏锐的哨兵，静静守候，待元素进入视口瞬间，立刻唤醒预设的动作。

#三、WeakMap：悄无声息的内存守护者

在 DOM 节点存储临时数据时，我们常常陷入内存泄漏的泥沼。WeakMap 如一位温柔的守护者，其键为弱引用对象，一旦对象被回收，值也会随之消逝。

复制const cache = new WeakMap();
function setElementData(element, data) {
  cache.set(element, data);
}

这好比在沙滩上轻轻印刷的图案，当海浪带走沙子，图案也丝毫不留痕迹地消散。

#四、ResizeObserver：精准捕捉元素尺寸变幻

对于自适应图表等对元素尺寸敏感的场景，传统的 resize 事件常显得笨拙。ResizeObserver 则能够精准洞察元素尺寸的每一次细微变化。

复制const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    adjustChart(entry.contentRect.width);
  });
});
resizeObserver.observe(chartContainer);

它如同拥有透视眼的艺术家，在元素尺寸变更时，迅速调配出最适配的画面。