可使用 requestIdleCallback 延迟非关键初始化逻辑以提升首屏性能，它在浏览器帧末空闲时执行，需通过 IdleDeadline 控制执行时长并降级兼容，长任务应分片处理，避免 DOM 写操作和顺序依赖。
可以利用 requestIdleCallback 把非关键、可延迟的初始化逻辑（比如预加载非首屏资源、上报轻量埋点、初始化非交互组件）推迟到浏览器空闲时执行，避免阻塞主线程，提升首屏渲染和交互响应速度。
理解 requestIdleCallback 的触发时机
它不是定时器，也不保证在某个时间点执行，而是由浏览器在帧末尾有剩余空闲时间时主动调用。每次回调会传入一个 IdleDeadline 对象，通过 deadline.timeRemaining() 可知还能安全运行多久（通常 1–50ms），且 deadline.didTimeout 为 true 表示已超时，应尽快结束任务。
- 只在主线程空闲时触发，比如 layout/paint/JS 执行间隙
- 页面不可见或后台标签页中可能被节流甚至暂停
- 不支持 Safari（截至 iOS 17.4 / macOS 14.4），需降级处理
封装一个兼容性友好的执行器
避免每次手动判断超时和降级，推荐封装一层工具函数：
function runWhenIdle(task, options = {}) {
// 降级：无 API 或强制同步时走 setTimeout(0)
if (!('requestIdleCallback' in window)) {
return setTimeout(() => task({ timeRemaining: () => 0, didTimeout: false }), 0);
}
<p>const { timeout = 2000 } = options;
return requestIdleCallback(deadline => {
task(deadline);
}, { timeout });
}</p>
使用时直接传入任务函数即可：
runWhenIdle(() => {
console.log('开始加载非核心模块');
loadAnalyticsSDK();
preloadNonCriticalImage();
});
拆分长任务并主动让出控制权
如果初始化逻辑本身较重（如遍历大量 DOM 节点、解析 JSON 数据），不能一股脑塞进一次 idle 回调。应主动切片，在每次空闲窗口内只处理一部分，剩余部分递归调度：
function processBatch(items, index = 0) {
return runWhenIdle(deadline => {
const start = Date.now();
while (index 1) {
doSomethingWithItem(items[index]);
index++;
// 防止单次耗时过长
if (Date.now() - start > 0.9 * deadline.timeRemaining()) break;
}
<pre class="brush:php;toolbar:false;">if (index <p>});
}</p>
避免常见误用
这些做法会影响效果或导致意外行为：
- 在
requestIdleCallback中执行 DOM 写操作（如el.innerHTML = ...），可能触发强制同步布局，破坏空闲意义；应优先用document.createDocumentFragment批量操作，或改用requestAnimationFrame处理视觉更新 - 依赖执行顺序的任务不要全丢给 idle —— 它不保证调用顺序，也不保证一定执行（尤其低优先级任务在内存紧张时可能被丢弃）
- 不要用它替代
setTimeout(fn, 0)做微任务排队；idle 是宏观调度，延迟不可控，适合“尽力而为”类任务
