多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
**屏幕刷新频率**,屏幕刷新率是指显示器的屏幕每秒钟会刷新多少次。目前,大部分的显示器的刷新频率为60次/秒,也就是说,屏幕刷新的间隔时间为大约1000/60=16.67ms。所以,一般来说,如果动画的执行频率跟屏幕的刷新频率一致,动画看起来就可以达到流畅的极限。 requestAnimationFrame和setTimeout有点相似,不同之处在于,setTimeout是在等待指定毫秒数之后被调用,而requestAnimationFrame则是在每次屏幕被刷新时被调用,注意,这里的屏幕刷新并不是指页面被刷新。requestAnimationFrame方法仅有一个参数,传入的这个方法将会在下一次屏幕刷新时被调用(实际上是被推入调用队列,并未立即执行),它的用法大体如下 window.requestAnimationFrame(function(){ console.log('测试'); }) 上述的写法会在下一次屏幕刷新时输出一个字符串。 requestIdleCallback requestIdleCallback跟setTimeout和requestAnimationFrame又有所不同。试想一下各位有没有过这样的需求,因为JavaScript的单线程特性,为了提升性能,我们有时候会想把一些不是特别重要的或者一些非常耗时的操作放在在浏览器空闲的时候去执行,那怎么判断当前浏览器是否空闲呢,requestIdleCallback提供了这样的一个功能。 requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点: 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。 2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。