js动画最佳实现——requestAnimationFrame

我们经常用setInterval来实现动画，其实这种做法不是太好，因为不同浏览器的刷新频率也不一样（一般认为设置16为最佳,按每秒60帧算，1000/60≈16.67）

var dis = 0,timer = 0;clearInterval(timer);timer = setInterval(function(){ ??div.style.left = ++dis;　　if(dis>=50) clearInterval(timer)},16)

实现js动画最好的是requestAnimationFrame:

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

var dis =0;function animation(){ ?requestAnimationFrame(function(){ ?????div.style.left = ++dis; ?????if(disx<50) animation(); ?}) ?}animation();