requestidlecallback 适合在页面稳定、用户浏览且主线程空闲时预加载，如停留超2秒、滚动停止后或表单填写完成时；需检查deadline.timeremaining()和didtimeout，并手动链式调用；应结合visibilitychange和用户行为提升可靠性，不支持时降级为settimeout或promise.then。
requestIdleCallback 是浏览器提供的一个 API，用于在浏览器空闲时段执行低优先级任务，比如后台数据预加载。它不会阻塞渲染或用户交互，适合处理非紧急但有益的“锦上添花”型操作。
什么时候适合用 requestIdleCallback 做预加载？
当页面已稳定、用户正在浏览（如滚动、暂停阅读）、主线程压力较小时，是预加载的理想时机。例如：
- 用户停留在某页超过 2 秒，预加载下一页可能需要的接口数据
- 列表滚动停止后，预加载相邻分页或关联推荐项
- 表单填写完成但尚未提交时，提前拉取校验所需的基础配置
注意：它不保证立即执行，也不适合有明确时效性要求的任务（如实时搜索建议）。
基本用法与防丢失机制
直接调用 requestIdleCallback 并传入回调函数即可，但需注意两点关键细节：
- 回调函数会收到一个
deadline对象，可用deadline.timeRemaining()判断剩余空闲时间，避免超时影响帧率 - 必须检查
deadline.didTimeout—— 若为 true，说明浏览器强制执行（即使忙），此时应只做最小必要工作或放弃 - 回调执行完若还有未完成的预加载任务，需再次调用
requestIdleCallback注册后续任务（它不是循环调度器）
示例：
function preloadNextPage() {
if (shouldPreload && !isPreloading) {
isPreloading = true;
requestIdleCallback((deadline) => {
while (deadline.timeRemaining() > 0 && hasMoreToLoad()) {
loadOneChunk(); // 比如 fetch 一个资源或解析一段 JSON
}
if (hasMoreToLoad()) {
// 剩余任务下次再续
requestIdleCallback(preloadNextPage);
} else {
isPreloading = false;
}
}, { timeout: 2000 }); // 超时强制执行，防止无限等待
}
}
结合 visibilitychange 和用户行为提升可靠性
单纯依赖空闲时间不够智能。建议配合页面可见性与用户停留行为：
- 监听
document.addEventListener('visibilitychange', ...)，页面切回前台时触发一次预加载 - 用
setTimeout+ 用户交互事件（如scroll、mousemove）实现“静默期检测”，例如 1.5 秒无操作后再发起 idle 调度 - 避免在页面卸载前（
beforeunload）仍排队大量 idle 任务，可提前取消（虽然无法直接取消，但可设标志位跳过执行）
兼容性与降级方案
IE 完全不支持，Safari 较晚版本才支持，且部分安卓 WebView 行为不稳定。生产环境建议：
- 先检测
typeof requestIdleCallback === 'function' - 不支持时，改用
setTimeout(fn, 0)或Promise.resolve().then(...)，虽非真正空闲调度，但至少不阻塞当前任务 - 对关键预加载逻辑，可加简单节流（如 5 秒内最多执行一次），防止降级后高频触发
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
