🛋️ requestIdleCallback：把非关键任务塞进浏览器的"空闲时间"，告别卡顿

问题场景

页面里总有一些低优先级、但很耗的任务：

埋点上报、日志收集
大数据列表的懒渲染/预计算
图片懒加载的"提前预取"
图表内部数据的聚合分析
编辑器的语法高亮、格式化

如果这些任务在用户交互的关键帧 里执行，就会和渲染抢主线程，造成输入延迟、掉帧、滚动卡顿，体验直线下降。

典型痛点：你用了 setTimeout(heavyTask, 0) 想把任务"延后"，但 setTimeout 只是排队，到点了必须执行，碰上正在渲染的关键帧照样卡。

原因分析

浏览器主线程是单线程，要同时处理：JS 执行、布局（Layout）、绘制（Paint）、合成（Composite）、处理事件。没有什么是"免费的"------每段 JS 都占用主线程。

setTimeout / requestAnimationFrame 都是"到点就执行"，没法感知"现在主线程忙不忙"。于是 js 任务一多就堆在某帧里，掉帧卡成 PPT。

requestIdleCallback 则不同：它让浏览器在每一帧的末尾，如果还有剩余时间 （deadline.timeRemaining()）才执行你的回调，主线程忙时就自动推迟，绝不抢关键渲染。

解决方案

1. 基本用法

js 复制代码

requestIdleCallback((deadline) => {
  // deadline.timeRemaining() 返回当前帧剩余空闲毫秒数
  console.log('空闲了，剩余时间：', deadline.timeRemaining());
  // 在这里做不紧急的任务
  doHeavyBackgroundWork();
}, { timeout: 2000 });

{ timeout: 2000 }：最大等待 2s，超时后即使不空闲也必须执行（兜底，防止任务被无限推迟饿死）。

2. 大任务切分：用 timeRemaining 分片（提升对）

timeRemaining() 是性能关键------你要边查边干，剩的时间不够就主动让出，下一帧再接着来：

js 复制代码

function processInChunks(items, callback) {
  let i = 0;
  function workLoop(deadline) {
    while (i < items.length && deadline.timeRemaining() > 5) {
      callback(items[i]);   // 处理一个
      i++;
    }
    if (i < items.length) {
      requestIdleCallback(workLoop);   // 没干完，下个空闲期继续
    }
  }
  requestIdleCallback(workLoop);
}

processInChunks(rows, row => renderRow(row));

这样每个空闲片段只干一点点，主线程永远不被长时间霸占，交互帧丝滑。

3. 真·对：测量并缓存"每帧能跑多少"

js 复制代码

function safeLoop(items, fn, budgetMs = 10) {
  let i = 0;
  function run(deadline) {
    while (i < items.length && deadline.timeRemaining() > budgetMs) {
      fn(items[i++]);
    }
    i < items.length ? requestIdleCallback(run) : done();
  }
  requestIdleCallback(run);
}

budgetMs 控制"一帧最多干多少"，越大越敢跑，越小越保守（对滚动更友好）。

4. 兼容性与降级

requestIdleCallback 在 Safari 支持较晚（15.4+），老浏览器要降级：

js 复制代码

const ric = window.requestIdleCallback
  ? (cb, opt) => window.requestIdleCallback(cb, opt)
  : (cb) => setTimeout(() => cb({ timeRemaining: () => 50 }), 1);

要点总结

requestIdleCallback 让浏览器在每帧剩余空闲时间 执行回调，主线程忙时自动延后，不抢关键渲染。
必须在回调里用 deadline.timeRemaining() 判断余量，主动分片/让出，否则等于没优化。
配合 { timeout } 兜底，防止低优先级任务被无限推迟（饿死）。
适合：埋点上报、非关键 DOM 预计算、大数据懒渲染等可推迟任务。
不适合：requestAnimationFrame 动画、用户输入响应、必须立刻执行的逻辑------那些用 rAF / 直接同步执行。
兼容：现代浏览器好用；Safari 15.4+，老浏览器记得降级到 setTimeout。
关键帧期间慎用：rec 的任务若在渲染关键路径，仍可能造成提交延迟，量大的活最好切小分片。

一句话：requestIdleCallback 是"削峰填谷"的调度器------把不紧急的活放到浏览器闲时做，让主线程永远有余力伺候用户交互。配合 timeRemaining 分片，是低优先级批量任务的性能救星。