功能介绍
利用浏览器的空余时间执行任务,如果有更高优先级的任务要执行时,当前执行的任务可以被终止,优先执行高级别任务。
requestIdleCallback(function (deadline) {
deadline.timeRemaining() // 获取浏览器的空余时间
})
浏览器空余时间
页面是一帧一帧绘制出来的,当每秒绘制的帧数达到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>
<style>
.playground {
background: palevioletred;
padding: 20px;
margin-bottom: 10px;
}
</style>
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'
})