requestlIdleCallback api

requestIdleCallback 是浏览器提供的一个 Web API，允许开发者在主线程空闲时执行低优先级的后台任务，以避免阻塞关键操作（如动画、用户输入响应）和页面渲染，从而提升页面性能和用户体验。

核心功能与特点

1. 空闲时间调度
   浏览器在每帧渲染（通常为 16.67ms，对应 60Hz 刷新率）结束后，若仍有剩余时间，会触发 requestIdleCallback 执行回调函数。若主线程繁忙（如处理动画、事件），则延迟执行，确保不干扰高优先级任务。
2. 超时机制
   通过 options.timeout 参数可设置最大等待时间。若在指定时间内浏览器未空闲，回调会被强制执行，避免任务无限期延迟。
3. 性能优化
   适用于非关键任务（如日志上报、数据预加载、懒加载、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);}}

使用场景

1. 非关键 DOM 操作
   • 懒加载图片或列表项（滚动时动态添加元素）。
   • 批量更新 DOM（如一次性插入多个节点，而非逐个操作）。
2. 后台任务
   • 数据预加载（如预取下一页内容）。
   • 日志上报或分析数据发送（避免阻塞用户交互）。
3. 资源清理
   • 移除未使用的 DOM 节点或事件监听器。

注意事项

1. 兼容性
   • 实验性 API，部分浏览器（如 Safari）需手动启用或不支持。
   • 推荐使用 polyfill（如 React 的 Scheduler 库）或回退方案（如 setTimeout 模拟空闲时间）。
2. 执行时间限制
   • 单次回调执行时间不宜过长（建议 <30ms），否则会占用下一帧的渲染时间，导致卡顿。
3. 非精确计时
   • 不适用于需要精确时间控制的任务（如动画），应使用 requestAnimationFrame。

与类似 API 的对比

示例：懒加载列表

constobserver=newIntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){window.requestIdleCallback(()=>{loadMoreItems();// 在空闲时加载更多数据});}});});

总结

requestIdleCallback 是优化页面性能的有效工具，尤其适合处理非关键任务。通过合理利用浏览器的空闲时间，可以减少主线程压力，提升流畅度。但需注意兼容性和执行时间限制，必要时结合 polyfill 或回退方案。