浏览器API

requestIdleCallback

利用浏览器空闲时间执行任务，如果有高优先级的任务，当前执行的任务将会被终止，优先执行高级别的任务。

浏览器空闲时间

浏览器的画面是一帧一帧渲染出来的，当每秒绘制帧数达到60帧时，页面是流畅的，用户不会感觉到卡顿。此时每一帧的渲染时间是1000/60 ≈ 16 ms ，如果每一帧执行时间小于16ms， 就说明浏览器有空闲时间。

如果在任务在剩余时间内没有执行完成，则会停止任务执行，继续优先执行主任务，也就是说 requestIdleCallback 总是利用浏览器空闲时间执行任务。

使用

const requestIdleId = requestIdleCallback(function(IdleDeadline){

}, {
	timeout: 1000
})
// IdleDeadline 一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 IdleDeadline 的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。
// 如果指定了 timeout，并且有一个正值，而回调在 timeout 毫秒过后还没有被调用，那么回调任务将放入事件循环中排队，即使这样做有可能对性能产生负面影响。

返回值

一个 ID，可以把它传入 Window.cancelIdleCallback() 方法来结束回调。

requestAnimationFrame

window.requestAnimationFrame(callback) 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

使用

const requestAnimationId = requestAnimationFrame(function (timestamp){
	// timestamp 该参数与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻。
})

返回值

一个 long 整数，请求 ID，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。