requestIdleCallback

功能介绍

利用浏览器的空余时间执行任务，如果有更高优先级的任务要执行时，当前执行的任务可以被终止，优先执行高级别任务。

requestIdleCallback(function (deadline) {
	deadline.timeRemaining() // 获取浏览器的空余时间
})
1
2
3

浏览器空余时间

页面是一帧一帧绘制出来的，当每秒绘制的帧数达到60时，页面是流畅的，小于这个值时，用户会感觉到卡顿。
1s60帧，每一帧分到的时间是1000/60=16ms，如果每一帧执行的时间小于16ms，就说明浏览器有空余时间
如果任务在剩余的时间内没有完成则会停止任务执行，继续优先执行主任务，也就是说requestIdleCallback总是利用浏览器的空余时间执行任务

功能体验

页面中有两个按钮，点击第一个按钮执行一项昂贵的计算，使其长期占用主线程，点击第二个按钮更改页面中的DIV背景颜色。
正常来说主线程被占用是不能响应用户操作的，呈现给用户的结果就是页面发生了卡顿。
使用requestIdleCallback就可以完美解决这个卡顿问题。

<div class="playground" id="play">play</div>
<button id="work">start work</button>
<button id="interaction">handle some user interaction</button>
1
2
3

<style>
	.playground {
		background: palevioletred;
		padding: 20px;
	    margin-bottom: 10px;
	}
</style>
1
2
3
4
5
6
7

var play = document.getElementById('play')
var workBtn = document.getElementById('work')
var interactionBtn = document.getElementById('interaction')
var interactionCount = 10000000
var value = 0
function calc (deadline) {
   while (interactionCount > 0 && deadline.timeRemaining() > 1) {
   		value = Math.random() < 0.5 ? Math.random() : Math.random()
        console.log(interactionCount)
        interactionCount--
   }
   requestIdleCallback(calc)
}
workBtn.addEventListener('click', function () {
    requestIdleCallback(calc)
})

interactionBtn.addEventListener('click', function () {
   play.style.background = 'red'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20