90. requestIdleCallback

[goldEli]

说说 requestIdleCallback 有什么用，怎么用？

[goldEli]

从这个 API 的字面意思就可以理解，询问浏览器的时间安排，浏览器会告诉你，未来多少秒是空闲的

假如你的操作要1秒，浏览器告诉你它未来空余时间大于1秒，那么你就可以执行你的操作。

这样做的好处就是不会造成浏览器主线程阻塞，用户就不会感受到动画，操作卡顿等不好的体验。

React 就是利用这个API实现暂停渲染，为高优先级操作让出主线线程，如下代码：

function callback(timeline) {
    // 询问浏览器是否空闲
    if (timeline.timeRemaining()>1) {
        /**
            React 利用 fiber 数据结构将渲染分成多个任务每次执行一个
        */
        // 获取一个渲染任务
        const unitOfWork = getUnitOfWork()
        // 执行渲染任务
        excuteUnitOfWork(unitOfWork)
    }
    window.requestIdleCallback(callback)
}

window.requestIdleCallback(callback)

[nanslee]

• 当关注用户体验，不希望因为一些不重要的任务导致用户感觉到卡顿的话，就应该考虑使用requestIdleCallback，因为requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态。

  requestIdelCallback(myNonEssentialWork);
  
  function myNonEssentialWork(deadline) { 
    // deadline.timeRemaining()可以获取到当前帧剩余时间
    while (deadline.timeRemaining() > 0 && tasks.length > 0) {
      doWorkIfNeeded();
    }
    if (tasks.length > 0){
      requestIdleCallback(myNonEssentialWork);
    }
  }

• requestAnimationFrame的回调会在每一帧确定执行，属于高优先级任务，而requestIdleCallback的回调则不一定，属于低优先级任务。 我们所看到的网页，都是浏览器一帧一帧绘制出来的，通常认为FPS为60的时候是比较流畅的，而FPS为个位数的时候就属于用户可以感知到的卡顿了，而一帧包含了用户的交互、js的执行、以及requestAnimationFrame的调用，布局计算以及页面的重绘等工作。 假如某一帧里面要执行的任务不多，在不到16ms（1000/60)的时间内就完成了上述任务的话，那么这一帧就会有一定的空闲时间，这段时间就恰好可以用来执行requestIdleCallback的回调

[zlx362211854]

requestIdleCallback可以监听浏览器状态，当浏览器空闲的时候，会执行传入的回调函数：

    requestIdleCallback(myNonEssentialWork);
    let start = new Date().valueOf()
    while (new Date().valueOf() - start < 5000) {
      // 占用5秒
    }
    function myNonEssentialWork (deadline) {
      console.log(deadline.timeRemaining(), 'deadline.timeRemaining()')

      // if (tasks.length > 0){
      //   requestIdleCallback(myNonEssentialWork);
      // }
    }

如上，如果我们一直占用浏览器5秒，那么5秒后，回调函数会被执行，告诉我们，现在浏览器处于空闲状态。