setTimeout 丢帧

setTimeout通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果。但利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 

这种现象的产生有两个原因：

setTimeout的执行时间并不是确定的。setTimeout任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此setTimeout 的实际执行时间一般要比其设定的时间晚一些。

刷新频率受屏幕分辨率和屏幕尺寸的影响，不同设备的屏幕刷新频率可能会不同，而setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。 

---

为什么步调不一致就会引起丢帧呢？

setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现如下绘制过程：

第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；

第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；

第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；

第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;

第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;

第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；

…

从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。