深入理解 requestAnimationFrame
Web应用中，实现动画效果的方法如下：
- JavaScript中可以通过setTimeout来实现
- CSS3中可以通过transition和animation来实现
- html5的canvas也可以实现
- html5新增的请求动画API,requestAnimationFrame请求帧动画
requestAnimationFrame 背后的原理
屏幕刷新频率
图像在屏幕上的更新速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。
一般电子产品是60HZ
显示器有两种 : CRT和LCD
一秒钟刷新60次
1s = 1000ms;
1000ms/60 ≈ 16.7ms/帧
动画的原理
动画的本质 :让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡
setTimeout
setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们会发现，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因 :
setTimeout的执行时间并不是确定的。在Javascript中， setTimeout任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此setTimeout的实际执行时间一般要比其设定的时间晚一些。
刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。
导致的结果 : setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象
我们可以看出屏幕并没有更新left = 2的那一帧动画，图像直接从1px跳到3px，丢帧的现象就会导致卡顿
requestAnimationFrame
requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机，也就是会随着客户端显示器的的刷新率变化而变化