JS动画三剑客——setTimeout、setInterval、requestAnimationFrame

一、前言

　　前端实现动画效果主要有以下几种方法：CSS3中的transition 和 animation ，Javascript 中可以通过定时器 setTimeout、setinterval，HTML5 canvas，HTML5提供的requestAnimationFrame。本文主要分析setTimeout、setinterval、requestAnimationFrame三者的区别和他们各自的优缺点。

二、浏览器动画原理

        浏览器动画的基本实现思路。实际上是在前端运行一个频繁触发的函数，这个函数每次运行时都是更新物体的位置属性。比如每次都沿X方向都会加1，当这个函数的触发频率足够高时，人眼就不会有任何察觉，因此显示在屏幕上的效果就是流畅的动画了。

三、CSS3动画和JS动画的比较

        CSS动画优点简单、与内容分离、不触发layout和 paint; 缺点有浏览器兼容性问题，安卓手机会出现卡顿、受排版引擎的影响，与整个页面的dom结构息息相关。

        JS动画优点控制能力强，动画效果丰富，没有兼容问题。缺点JS在浏览器主线程上运行，而主线程中还有其他需要运行的js脚本、样式计算、布局、绘制任务，对其干扰可能导致线程出现阻塞，从而造成丢帧的情况；JS动画频繁操作DOM,使浏览器频繁重绘和重排，性能消耗大。

四、setInterval

        运行机制：按照指定的周期来不停的调用函数。当页面被隐藏或者最小化时，setInterval 仍在后台继续执行，这种动画刷新是完全没有意义的，对cpu也是极大的浪费，直到 clearInterval 被调用或窗口被关闭。setInterval的执行时间不确定，参数中的时间间隔是将代码添加到异步队列中等待的时间。只有当主线程中的任务以及队列前面的任务执行完毕，才真正开始执行动画代码。

        缺点：setInterval无视代码错误，代码出现错误，它还会持续不断地调用代码；setInterval无视网络延迟，由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限等等），网络请求花费的时间比预期的要长。但是setInterval不在乎，它仍然会按定时持续不断地出发请求，最终塞满网络队列。setInterval不保证到了时间间隔，代码就能执行。如果回调函数需要花很长时间才能完成，那某些调用会被直接忽略。

五、setTimeout

        运行机制：在指定的毫秒数后调用函数。每次函数执行的时候都会创建一个新的定时器。在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，当方法执行完成定时器就立即停止。

        缺点：setTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象；setTimeout任务被放进了异步队列中，只有当主线程上的任务执行完之后，才会去检查该队列里的任务是否需要执行，因此setTimeout的实际执行时间一般要比其设定的时间晚一些。

六、requestAnimationFrame

        运行机制：不需要设置时间间隔，使用一个回调函数作为参数，这个回调函数会
在浏览器重回之前调用。它返回一个整数，表示定时器编号，这个值可以传递给
cancelAnimationFrame用于取消这个函数的执行。

        优点：requestAnimation会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中完成，并且重绘和回流的频率跟随浏览器。在隐藏元素中和页面不激活的状态下，requestAnimationFrame 不进行工作，减少CPU、GPU、内存的使用量。

        缺点：是不管理回调函数。

应用场景：

        【1】监听 scroll 函数 页面滚动事件（scroll）的监听函数，就很适合用这个 api，推迟到下一次重新渲染。

【2】大量数据渲染 比如对十万条数据进行渲染，主要由以下几种方法：

【3】监控卡顿方法 ：每秒中计算一次网页的 FPS（画面每秒传输帧数），获得一列数据，然后分析。通俗地解释就是，通过 requestAnimationFrame API 来定时执行一些 JS 代码，如果浏览器卡顿，无法很好地保证渲染的频率，1s 中 frame 无法达到 60 帧，即可间接地反映浏览器的渲染帧率。