requestIdleCallback 是浏览器提供的一个 Web API，允许开发者在主线程空闲时执行低优先级的后台任务，以避免阻塞关键操作（如动画、用户输入响应）和页面渲染，从而提升页面性能和用户体验。
核心功能与特点
- 空闲时间调度
浏览器在每帧渲染（通常为 16.67ms，对应 60Hz 刷新率）结束后，若仍有剩余时间，会触发 requestIdleCallback 执行回调函数。若主线程繁忙（如处理动画、事件），则延迟执行，确保不干扰高优先级任务。 - 超时机制
通过 options.timeout 参数可设置最大等待时间。若在指定时间内浏览器未空闲，回调会被强制执行，避免任务无限期延迟。 - 性能优化
适用于非关键任务（如日志上报、数据预加载、懒加载、DOM 清理等），减少对主线程的占用，防止页面卡顿。
基本用法
window.requestIdleCallback(callback,{timeout:2000});functioncallback(deadline){// deadline.timeRemaining() 返回当前帧剩余空闲时间（毫秒）while(deadline.timeRemaining()>0&&tasks.length>0){doTask(tasks.shift());}// 若任务未完成，可重新调度if(tasks.length>0){window.requestIdleCallback(callback);}}使用场景
- 非关键 DOM 操作
- 懒加载图片或列表项（滚动时动态添加元素）。
- 批量更新 DOM（如一次性插入多个节点，而非逐个操作）。
- 后台任务
- 数据预加载（如预取下一页内容）。
- 日志上报或分析数据发送（避免阻塞用户交互）。
- 资源清理
- 移除未使用的 DOM 节点或事件监听器。
注意事项
- 兼容性
- 实验性 API，部分浏览器（如 Safari）需手动启用或不支持。
- 推荐使用 polyfill（如 React 的 Scheduler 库）或回退方案（如 setTimeout 模拟空闲时间）。
- 执行时间限制
- 单次回调执行时间不宜过长（建议 <30ms），否则会占用下一帧的渲染时间，导致卡顿。
- 非精确计时
- 不适用于需要精确时间控制的任务（如动画），应使用 requestAnimationFrame。
与类似 API 的对比
| API | 用途 | 调度时机 |
|---|---|---|
| requestIdleCallback | 低优先级后台任务 | 主线程空闲时 |
| requestAnimationFrame | 动画相关任务 | 每帧渲染前 |
| setTimeout/setInterval | 延迟或周期性任务 | 按指定时间触发，可能阻塞主线程 |
示例：懒加载列表
constobserver=newIntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){window.requestIdleCallback(()=>{loadMoreItems();// 在空闲时加载更多数据});}});});总结
requestIdleCallback 是优化页面性能的有效工具，尤其适合处理非关键任务。通过合理利用浏览器的空闲时间，可以减少主线程压力，提升流畅度。但需注意兼容性和执行时间限制，必要时结合 polyfill 或回退方案。