Window:requestAnimationFrame() 方法
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。
let index = 0
function chunk() {
requestAnimationFrame(() => {
// 切片
let target = index+10
for (let index = 0; index <target; index++) {
data.push(index)
}
if (index < 100) {
chunk()
}
})
}
requestIdleCallback
window.requestIdleCallback() 方法插入一个函数,这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。函数一般会按先进先调用的顺序执行,然而,如果回调函数指定了执行超时时间timeout,则有可能为了在超时前执行函数而打乱执行顺序。
比如埋点等低优先级任务可以加入在里面
const requestIdleCallbackFn = function (callback) {
if ('requestIdleCallback' in window) {
window.requestIdleCallback(() => {
callback && callback()
})
}else {
setTimeout(() => {
callback && callback()
},0)
}
}
总结
- 以后开发中要想到这两个API 哦~