什么是requestIdleCallback?
window.requestIdleCallback() 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。
我们从文档中可以看出一些关键信息
- 浏览器空闲时期被调用
- 主事件循环上执行后台和低优先级工作
- 可指定超时时间
timeout
我们知道JavaScript是单线程语言，所以代码默认都执行在主线程上，包括GUI渲染和JS引擎相关的操作，所有的任务会分为MicroTask和MacroTask依次执行。
当我们遇到一些长耗时任务时，后续任务就会挂起，直到当前任务执行完成。这样就是发生这样一些问题，比如执行复杂操作时，会产生UI卡顿的情况。
为了解决这个问题，requestIdleCallback就出现了，它允许开发者在浏览器空闲时期执行一些任务，从而避免主线程被阻塞。
我们来看看requestIdleCallback的参数:
callback: 一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 IdleDeadline 的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。
options.timeout：如果指定了 timeout，并且有一个正值，而回调在 timeout 毫秒过后还没有被调用，那么回调任务将放入事件循环中排队，即使这样做有可能对性能产生负面影响。
可以看到使用时需要传入回调函数，而回调函数的参数是：IdleDeadline，IdleDeadline是一个对象，它包含两个属性：didTimeout和timeRemaining。`
didTimeout表示回调是否在超时时间内执行，这个值根据我们传入的timeout来决定。
timeRemaining表示当前空闲时间，浏览器将执行的操作分位很多周期，timeRemaining会返回当前闲置周期的预估剩余毫秒数，这样我们就可以根据当前闲置周期是否有足够的时间来判断是否应该继续执行任务，并不会因为长耗时而影响性能。
当然如果在这个周期中执行长耗时任务同样会造成性能的影响，所以需要做的是将长耗时任务拆分成多个短耗时任务，然后根据闲时时长判断依次执行即可。
需要注意的是requestIdleCallback中并不建议放置高优先级任务，它并不保证任务的执行顺序，所以如果需要高优先级任务，可以考虑使用requestAnimationFrame