web动画之 requestAnimationFrame
setTimeout | setInterval
通过设定间隔时间来不断改变图像位置,达到动画效果。但是容易出现卡顿、抖动的现象;原因是:
1、setTimeout | setInterval 任务被放入异步队列,只有当主线程任务执行完后才会执行队列中的任务,因此实际执行时间总是比设定时间要晚;
2、settimeout的固定时间间隔不一定与屏幕刷新时间相同,会引起丢帧
requestAnimationFrame
1、会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
2、在隐藏或不可见的页面中,requestAnimationFrame将会暂停,这当然就意味着更少的CPU、GPU和内存使用量