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

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

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

复制 1function processDataChunk(deadline) {
 2  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
 3    executeTask(tasks.pop());
 4  }
 5  if (tasks.length > 0) {
 6    requestIdleCallback(processDataChunk);
 7  }
 8}
 9requestIdleCallback(processDataChunk);

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

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

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

复制 1const observer = new IntersectionObserver((entries) => {
 2  entries.forEach(entry => {
 3    if (entry.isIntersecting) {
 4      entry.target.src = entry.target.dataset.src;
 5      observer.unobserve(entry.target);
 6    }
 7  });
 8}, { threshold: 0.1 });
 9document.querySelectorAll('.lazy-img').forEach(img => observer.observe(img));

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

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

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

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

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

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

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

复制 1const resizeObserver = new ResizeObserver(entries => {
 2  entries.forEach(entry => {
 3    adjustChart(entry.contentRect.width);
 4  });
 5});
 6resizeObserver.observe(chartContainer);

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