页面优化requestIdleCallback和requestAnimationFrame详解
requestIdleCallback和requestAnimationFrame详解API window.requestIdleCallback只有当系统有空闲时间时才会执行,若一直没有空闲时间则一直会等待,有一个options可选timeout超时取消,意思是当等待时间超过设定时间时就取消该任务var handle = window.requestIdleCallback(callback[,
requestIdleCallback和requestAnimationFrame详解
API
window.requestIdleCallback只有当系统有空闲时间时才会执行,若一直没有空闲时间则一直会等待,有一个options可选timeout超时取消,意思是当等待时间超过设定时间时就取消该任务
var handle = window.requestIdleCallback(callback[, options])
- callback:回调,即空闲时需要执行的任务,该回调函数接收一个IdleDeadline对象作为入参。其中IdleDeadline对象包含:
- didTimeout,布尔值,表示任务是否超时,结合 timeRemaining 使用。
- timeRemaining(),表示当前帧剩余的时间,也可理解为留给任务的时间还有多少。
- options:目前 options 只有一个参数 timeout。表示超过这个时间后,如果任务还没执行,则强制执行,不必等待空闲。
IdleDeadline对象参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/IdleDeadline
window.requestAnimationFrame(func)
每次都会执行,类似于setInterval只不过不用传延时,requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。
特点
requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量
requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销
使用
更多推荐
所有评论(0)