UD5工具箱
常见问题
什么是 requestIdleCallback？
requestIdleCallback 是浏览器提供的原生 API，允许开发者注册一个回调函数，在浏览器主线程空闲时段执行。它专为低优先级任务设计，不会与渲染、用户交互等高优先级工作竞争主线程资源。调用时可以传入一个可选的 timeout 参数，确保任务在指定时间内得到执行。
requestIdleCallback 与 requestAnimationFrame 有什么区别？
两者的核心区别在于适用场景不同。requestAnimationFrame 面向渲染相关任务，在每次浏览器重绘前执行，保证动画和视觉更新与显示刷新同步。requestIdleCallback 面向空闲任务，在主线程空闲时段执行，适合数据上报、日志发送、预加载等不紧急的后台工作。不应将需要与画面同步的任务放入 rIC 中执行。
timeRemaining() 和 didTimeout 的作用是什么？
timeRemaining() 是 IdleDeadline 对象上的方法，返回当前空闲时段的剩余毫秒数。开发者可以据此判断是否还有足够时间处理任务，如果剩余时间不足可以将任务推迟。didTimeout 是一个布尔值，为 true 时表示该回调是因为设置的 timeout 到期而被强制调用的，此时主线程可能并不空闲。两者配合使用可以实现更精细的调度控制。
requestIdleCallback 的浏览器兼容性如何？
目前 Chrome、Edge 和 Firefox 均已支持 requestIdleCallback。Safari 尚未实现该 API。在生产环境中使用时，建议通过特性检测判断是否支持，并为不支持的浏览器提供降级方案，例如使用 setTimeout 作为后备。也可以考虑引入 polyfill 库来统一行为。
使用 requestIdleCallback 的最佳实践有哪些？
主要建议包括：将大型任务拆分为多个小片段，在每次回调中处理一部分；始终设置合理的 timeout 参数，避免任务被无限期延迟；避免在回调中进行 DOM 操作，因为 rIC 回调执行时浏览器可能即将开始渲染；结合 shouldYield 模式检查剩余时间，主动让出主线程；在任务不需要时及时取消已注册的回调，避免不必要的执行。
requestIdleCallback 适合什么类型的任务？
适合执行不紧急、允许延迟的后台任务，例如：数据上报和分析日志发送、资源的预加载和预渲染、后台缓存的更新与维护、非关键数据的预计算、DOM 中非可视区域内容的懒加载等。任何影响用户体验的交互响应和视觉更新都不应使用此 API。
为什么我在本工具中看到某些任务被标记为超时执行？
当设置了 timeout 参数后，如果浏览器在指定的毫秒数内没有进入空闲时段，系统会强制调用回调函数，此时日志中会标记该任务为超时触发。这通常发生在主线程持续繁忙的情况下。在实际项目中，这种机制可以保证数据上报等时效性任务不会因长时间等待空闲而丢失。你可以通过增加模拟繁忙的强度来观察更多超时触发的情况。
如何判断当前主线程是否空闲？
在本工具中可以通过空闲率统计面板查看实时的空闲百分比。在实际开发中，可以使用 Performance Observer 监听 longtask 来检测长任务，也可以通过 Chrome DevTools 的 Performance 面板录制页面活动，查看主线程的时间线图。空闲率越高说明主线程有越多可利用的时间片段。requestIdleCallback 回调中 timeRemaining() 返回的值也能反映当前的空闲状态。