requestIdleCallback

requestIdleCallback常用于做一些低优先级的任务。当一帧的末尾有空闲时间，才会执行回调函数。

requestIdleCallback(fn[,options]);

当前帧的运行时间小于刷新频率（16.6ms）,函数fn才会执行。否则，就推迟到下一帧，以此类推。如果timeout时间内都没有时间，fn则会强制执行。

函数fn接受deadline对象作为参数，deadline对象有两个属性：timeRemaining和didTimeout。

1. timeRemaining() 返回当前帧还剩余的毫秒数。
2. didTimeout 指定的时间是否过期。

范例1：

function lowWork(deadline) {
  while (
    (deadline.timeRemaining() > 0 || deadline.didTimeout) &&
    taskList.length > 0
  ) {
    doWork();
  }
  if (taskList.length > 0) {
    requestIdleCallback(lowWork);
  }
}
requestIdleCallback(lowWork);

范例2：

  
    
    
    
    
  
  
    
  

// 本帧还剩余：13.5ms
// 开始执行任务 1
// 已经完成任务 1
// 本帧没有时间了，等浏览器空闲再继续执行任务
// 本帧还剩余：4.9ms
// 开始执行任务 2
// 已经完成任务 2
// 本帧没有时间了，等浏览器空闲再继续执行任务
// 本帧还剩余：49.4ms
// 开始执行任务 3
// 已经完成任务 3

参考

• https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
• https://wiki.developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API#Example
• http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html