requestIdleCallback笔记

参考文章

参考文章

最近在看react fiber的架构，里面的核心是requestIdleCallback，虽然为了兼容，react直接自己实现了一个这个东西。但是了解requestIdleCallback还是很有必要的。

idle译为空闲的，顾名思义：这是一个利用帧空闲时间来触发执行的函数。而且是一个低优先级的函数，如果帧一直没有空闲时间，那就一直不执行，除非时间过了自己设定的Timeout。

示例代码：

requestIdleCallback(myNonEssentialWork, { timeout: 2000 });

let tasks = {
  length: 4
}

function myNonEssentialWork (deadline) {
  // 当回调函数是由于超时才得以执行的话，deadline.didTimeout为true
  // deadline.timeRemaining() 获取每一帧还剩余的时间
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
    console.log('done', tasks, deadline.timeRemaining())
    tasks.length = tasks.length - 1
  }
  if (tasks.length > 0) {
    requestIdleCallback(myNonEssentialWork);
  }
}

相对应的requestAnimationFrame

这是一个帧高优先级函数，每一帧都会执行此函数

requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率