requestIdleCallback 是浏览器在主线程空闲时调度低优先级任务的 API，通过 deadline.timeRemaining() 和 didTimeout 控制执行时机，支持 timeout 降级为 rAF 或 setTimeout。
requestIdleCallback 是浏览器提供的一个 API，用于在主线程空闲时执行低优先级任务，是 JavaScript 长任务拆分、避免阻塞渲染和保持页面响应性的有效手段。
什么是空闲时间？
浏览器每一帧大约有 16ms（60fps）的时间完成样式计算、布局、绘制等操作。如果 JS 执行耗时过长，就会挤占这 16ms，导致掉帧、卡顿。requestIdleCallback 会在浏览器完成当前高优先级工作（如渲染、用户输入响应）后，把剩余的空闲时间“切片”出来，交给你执行轻量任务。
它不是定时器，也不是轮询，而是由浏览器主动调度——空闲才调用，没空闲就延迟或不执行。
基本用法与关键参数
调用方式很简单：
立即学习“Java免费学习笔记（深入）”；
requestIdleCallback(callback, { timeout: 3000 });
其中：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
-
callback 接收一个
deadline参数，是一个IdleDeadline对象，含两个关键属性：
•deadline.timeRemaining()：返回当前空闲时段还剩多少毫秒（通常 ≤ 50ms，受帧率和系统负载影响）；
•deadline.didTimeout：为 true 表示已超时，即使没空闲也强制触发（此时 timeRemaining 可能为 0）。 - timeout 是可选配置，表示最多等待多久后强制执行（单位毫秒），防止任务被无限搁置。建议设为 2000–5000，避免关键逻辑长期不执行。
如何拆分长任务？
核心思路是：把一个大任务切成小块，在每次空闲回调中处理一部分，直到完成或时间耗尽。
例如，处理 10 万条数据：
const data = new Array(100000).fill(0);
let index = 0;
function processChunk(deadline) {
while (index < data.length && deadline.timeRemaining() > 1) {
// 模拟单条处理（避免复杂计算或 DOM 操作）
data[index] = Math.sqrt(index);
index++;
}
if (index < data.length) {
// 还没做完，继续注册下一次
requestIdleCallback(processChunk, { timeout: 3000 });
} else {
console.log('全部处理完成');
}
}
requestIdleCallback(processChunk, { timeout: 3000 });
注意点：
- 每次只做「可中断」的操作，避免同步耗时动作（如大量 DOM 修改、JSON.parse 大字符串）；
- 循环内必须检查
timeRemaining() > 1（留点余量），不能只依赖> 0； - 不要在 callback 内直接递归调用自身，要用
requestIdleCallback显式注册下一轮； - 若任务含副作用（如更新 UI），可在批量处理完一批后再统一刷新，减少重排重绘。
兼容性与降级方案
requestIdleCallback 在 Chrome、Edge、Firefox 中支持良好，但 Safari 目前（截至 Safari 17）仍不支持。
简单降级写法：
const rIC = window.requestIdleCallback ||
window.requestAnimationFrame ||
function(cb) { setTimeout(cb, 0); };
rIC(callback, { timeout: 3000 });
说明：
- 优先用
requestIdleCallback； - 不支持时退到
requestAnimationFrame（下一帧开始前执行，比setTimeout(0)更贴近渲染时机）； - 再不行就用
setTimeout(0)，虽无空闲感知，但至少不会阻塞当前同步代码。
