JS原生Background Tasks

一.window.requestIdleCallback

1.作用：

这个方法将会在浏览器的空闲时间调用函数排队。这样可以使操作者在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，比如动画和输入响应，函数一般会按照先进先执行的顺序进行调用，但是如果设置了timeout（超时执行时间），将会导致为了在超时之前执行相应的函数操作而打乱执行顺序。

2.使用方法

window.requestIdleCallback(callback,option)
参数：
callback：一个在浏览器空闲时即将被调用的函数引用函数会接收到一个名为IdleDeadline的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。（IdleDeadline对象包括didTimeout，是一个布尔值表示任务是否超时；以及timeRemaining()，表示当前帧剩余的时间，是留给任务执行的时间）
option：配置项，可以配置timeout，是可选参数（timeout：如果指定了timeout并具有一个正值，并且尚未通过超时毫秒数调用回调，那么回调会在下一次空闲时期被强制执行，尽管这样很可能会对性能造成负面影响。）
返回值：
一个ID，可以通过window.cancelIdleCallback()来结束回调

requestIdleCallback(myNonEssentialWork, { timeout: 2000 });

// 任务队列
const tasks = [
 () => {
   console.log("第一个任务");
 },
 () => {
   console.log("第二个任务");
 },
 () => {
   console.log("第三个任务");
 },
];

function myNonEssentialWork (deadline) {
 // 如果帧内有富余的时间，或者超时
 while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
   work();
 }

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

function work () {
 tasks.shift()();
 console.log('执行任务');
}

3.使用setTimeout模拟实现

window.requestIdleCallback = window.requestIdleCallback || function(handler) {
  let startTime = Date.now();
 
  return setTimeout(function() {
    handler({
      didTimeout: false,
      timeRemaining: function() {
        return Math.max(0, 50.0 - (Date.now() - startTime));
      }
    });
  }, 1);
}

可以在 ric 中执行任务时需要注意以下几点：
1.执行重计算而非紧急任务
2.空闲回调执行时间应该小于 50ms，最好更少
3.空闲回调中不要操作 DOM，因为它本来就是利用的重拍重绘后的间隙空闲时间，重新操作 DOM 又会造成重拍重绘，DOM 操作建议在 rAF 中进行。同时，操作 DOM 所需要的耗时是不确定的，因为会导致重新计算布局和视图的绘制，所以这类操作不具备可预测性。
4.Promise 也不建议在这里面进行，因为 Promise 的回调属性 Event loop 中优先级较高的一种微任务，会在 requestIdleCallback 结束时立即执行，不管此时是否还有富余的时间，这样有很大可能会让一帧超过 16 ms。
React 的时间分片便是基于类似 requestIdleCallback 而实现，然而因为 ric 的兼容性及 50ms 流畅问题，React 自制了一个实现: scheduler

二.window.requestAnimationFrame

1.作用：

通知浏览器，要求在下一次重绘之前调用指定的回调函数更新动画。如果希望在下一次重绘之前更新下一帧动画，那么需要回调函数自身必须再次调用window.requestAnimationFrame(),当window.requestAnimationFrame运行在后台标签或者隐藏的iframe时，会被暂停来提高性能

2.用法

window.requestAnimationFrame(callback)
参数：
callback：下一次重绘之前更新动画帧所调用的函数。该回调函数会被传入DOMHighResTimeStamp参数，它表示的是开始执行回调函数的时刻
返回值：
一个ID，可以传入window.cancelAnimationFrame()以取消回调函数。

3.补充

以往我们执行动画动画时所采用的操作是setTimeout和setInterval,这种做法的弊端就是：回调函数执行时间是不固定的，有可能刚好就卡在末尾或者不再执行了，会引起丢帧和卡顿

归根到底发生上面这个问题的原因在于时机，也就是浏览器要知道何时对回调函数进行响应。setTimeout 或 setInterval 是使用定时器来触发回调函数的，而定时器并无法保证能够准确无误的执行，有许多因素会影响它的运行时机，比如说：当有同步代码执行时，会先等同步代码执行完毕，异步队列中没有其他任务，才会轮到自己执行。并且，我们知道每一次重新渲染的最佳时间大约是 16.6 ms，如果定时器的时间间隔过短，就会造成 过度渲染，增加开销；过长又会延迟渲染，使动画不流畅。

requestAnimationFrame 方法不同与 setTimeout 或 setInterval，它是由系统来决定回调函数的执行时机的，会请求浏览器在下一次重新渲染之前执行回调函数。无论设备的刷新率是多少，requestAnimationFrame 的时间间隔都会紧跟屏幕刷新一次所需要的时间；例如某一设备的刷新率是 75 Hz，那这时的时间间隔就是 13.3 ms（1 秒 / 75 次）。需要注意的是这个方法虽然能够保证回调函数在每一帧内只渲染一次，但是如果这一帧有太多任务执行，还是会造成卡顿的；因此它只能保证重新渲染的时间间隔最短是屏幕的刷新时间。