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();