Js之动画的最佳实现requestAnimationFrame

在讲解这个API之前，我们先来了解一些基础知识：

屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz。1000 / 60 ≈16.67 ，所以计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。

setTimeout：通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚。2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。

在知道了上述知识后，我们就开始今天的主题：

window.requestAnimationFrame(callback)：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

下面我们用定时器来实现一个动画，

let dis = 0;
let timer = null;

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

我改造成requestAnimationFrame版本：

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

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有三点：

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

3. 在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。