requestIdleCallback 低优先级任务

基本使用

const id = requestIdleCallback(function(idle){
	 idle.didTimeout; 	   // 回调是否因为超时执行
	 idle.timeRemaining(); // 当前空闲时间剩余的毫秒数
}, {
		timeout:5000,  // 强制超时未执行时，将回调放入事件循环中排队
	}
)

window.cancelIdleCallback(id); // 取消任务

特点

• 对非高优先级的任务使用空闲回调，不能保证每次事件循环（甚至每次屏幕更新）后都能执行空闲回调，可以使用的空闲时间上限为 50 ms
• 避免在空闲回调中改变 DOM，空闲回调执行的时候，当前帧已经结束绘制了，所有布局的更新和计算也已经完成。如果回调做的改变影响了布局，可能会强制停止浏览器并重新计算
  • 如果回调需要改变 DOM，应该使用 window.requestAnimationFrame() 来替换。

回退到 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);
}

window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
  clearTimeout(id);
}