requestAnimationFrame比起setTimeout、setInterval的优势

发布时间 2023-10-26 15:55:34作者: enShine

1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率;

setTimeout、setInterval它们的内在运行机制决定了 时间间隔参数 实际上只是指定了把动画代码添加到 浏览器UI线程队列 中以等待执行的时间。如果队列前面已经加入了其它任务,那动画代码就要等前面的 任务完成后 再执行,并且如果时间间隔过短(小于16.7ms)会造成丢帧,所以就会导致动画可能不会按照预设的去执行,降低用户体验。

2. 在隐藏或不可见的元素中,将不会进行重新重绘或回流;

3. requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销

 

总结:
1、requestAnimationFrame是浏览器的api,它的执行时间间隔是浏览器刷屏的时间间隔,所以不能设置执行时间间隔

2、setTimeout和setInterval能够设置执行时间间隔,但是它的执行任务是被放在浏览器线程的任务队列中等待执行的,所以可能会因为丢帧情况而导致动画卡顿效果

3、requestAnimationFrame在浏览器非激活状态下,动画会暂停,从而节省了CPU开销和浏览器内存消耗

4、隐藏或者不可见的dom ,是不会进行重绘和回流的