前端动画“大比拼”

Javscript 动画（setTimeout、setInterval）
1.性能不佳，因为需要不断获取和修改Dom的布局，所以导致了大量页面重排（repaint）
2.缺乏标准，不同的库使用了不同的API，导致即使是简单的动画也有各不相同的实现方式，调整起来比较耗时
3.带宽消耗，相对丰富的动画库代码量都很大，结果就是增加了http请求的大小，降低了页面的载入时间

CSS3动画 （transition、animation）
优势：
1.通过优化DOM操作，避免内存消耗来减少卡顿
2.使用与 RAF（requestAnimationFrame） 类似的机制
3.强制使用硬件加速 （通过 GPU 来提高动画性能）
总的来书，css 动画相比与JS更轻量，性能更好，更易于实现，同时也不必担心缺乏标准和增加带宽消耗的问题。
缺陷：
1.Transition 强制使用了 GPU 的硬件加速。导致浏览器一直处于高负荷运转的状态，这反而会让动画变的卡顿。这在移动浏览器上更为严重。（当数据在浏览器的主线程和合成线程之间频繁传输的时候特别消耗性能，故容易导致卡顿。某些 CSS 属性，不会受到影响。）
2.IE 10以下的浏览器不支持 transition。
3.transition 不能完全被 Javascript 控制（只能通过 Javascript 来触发 transition），因为浏览器不知道如何同时让 Javascript 控制动画又同时优化动画的性能。
4.不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程。

html5 动画（canvas、svg、webgl）
其中svg做为一种可缩放矢量图形的实现是基于xml标签定义的，它有专门的animate标签来定义动画。而为canvas或者webgl实现动画则需要通过 requestAnimationFrame (简称 raf) 来定期刷新画布。
RAF主要手段：
1.减少DOM样式属性查询，DOM样式属性的查询惠导致页面重排，从而消耗性能，通过将属性保存在JS变量中就可以避免在动画时去查询，从而减少卡顿。
2.使用性能更好的 css transform替代改变绝对定位元素的定位属性
3.在移动设备上使用 3d 硬件加速，最简单办法就是添加-webkit-transform:translateZ(0)，原因是移动端的显卡有很强的图形渲染能力，而每个应用的 webview 内存却是极其有限的。

RAF 相比setTimeout、setInterval的优势：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
**总的来说，requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API。 **