requestidlecallback 是浏览器在主线程空闲时执行低优先级任务的api，适用于日志上报、轻量预处理等非关键操作，但safari不支持且已被标记为non-standard，需用 settimeout 等降级。
requestIdleCallback 是什么，什么时候该用它
requestIdleCallback 是浏览器提供的一个 API，用于在主线程空闲时执行低优先级任务。它不是定时器，也不保证准时执行，只在浏览器判断“现在没活干”的间隙才调用回调——比如渲染帧完成、事件队列清空、没有高优先级任务排队时。
适合场景包括：非关键 UI 更新（如日志上报、分析埋点）、轻量级数据预处理、渐进式图片解码、组件懒初始化等。
不适合场景：需要及时响应的交互逻辑、动画帧同步操作、依赖严格执行顺序的任务。
注意：requestIdleCallback 在 Safari 中长期未支持（截至 Safari 17.4 仍不可用），且 Chrome/Firefox 已标记为“non-standard”，未来可能被移除。生产环境务必配 fallback（比如 setTimeout 或 postMessage 微任务降级）。
怎么安全调用 requestIdleCallback 并处理超时
requestIdleCallback 的回调函数会收到一个 deadline 对象，核心是 deadline.timeRemaining() 和 deadline.didTimeout。必须靠它判断是否还能继续执行，否则可能阻塞下一帧。
function doWork(deadline) {
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
const task = tasks.shift();
task();
}
if (tasks.length > 0) {
requestIdleCallback(doWork, { timeout: 1000 });
}
}
requestIdleCallback(doWork, { timeout: 1000 });
-
timeout参数不是“延迟多久执行”，而是“最多等 1000ms，即使没空闲也强制触发回调”，此时deadline.didTimeout为true，timeRemaining()返回 0 - 必须检查
timeRemaining() > 0，不能只用tasks.length控制循环，否则可能跑满整个空闲窗口，导致卡顿 - 不要递归调用
requestIdleCallback无限制，需设最大重试次数或退回到setTimeout(..., 0)防止饥饿
如何兼容 Safari 和未来废弃风险
Safari 不支持 requestIdleCallback，且规范已进入废弃流程（MDN 标记为 “non-standard”）。不能只写一层调用。
推荐 fallback 方案：
- 检测是否存在：
typeof requestIdleCallback === 'function' - 存在则用，不存在则走
setTimeout(fn, 0)（微任务级调度，最简）或postMessage+message事件模拟空闲（更接近行为） - 更稳妥的做法是封装成统一调度器，内部按环境自动选策略，对外暴露相同接口
示例降级逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const scheduleIdle = window.requestIdleCallback ||
((cb) => setTimeout(() => cb({ timeRemaining: () => 0 }), 0));
<p>scheduleIdle(myTask);</p>
注意：这个降级不提供 deadline，所以你的 myTask 要能接受无 deadline 的情况，或自行加时间切片逻辑（比如每次只处理 1 个 task）。
常见错误：把它当 setTimeout 或节流工具用
很多人误以为 requestIdleCallback 是“延迟执行”或“防抖节流替代品”，结果发现任务迟迟不执行，甚至完全不触发。
- 它不会在页面隐藏、后台标签页、或持续高频交互（如滚动、输入）时被调用
- 如果页面一直有事件/动画/定时器占着主线程，它可能几秒都不触发
- 没有取消机制：
cancelIdleCallback存在但极少用，且无法中断正在执行的回调
容易踩的坑：
- 把异步请求（
fetch）直接塞进回调里，结果因空闲不足反复推迟，用户感知为“功能卡住” - 在 React/Vue 组件卸载后仍保留 pending 的
requestIdleCallback，造成内存泄漏或状态错乱 - 忘记清理任务队列，导致旧任务在新批次中重复执行
真正空闲调度的关键，是理解“空闲”由浏览器定义，而非开发者控制；能做的只有适配它，而不是对抗它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
