css3动画与js动画的一些理解

http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html

首先是提到了jq动画慢的缘由是如下：

一、jq不能避免layout thrashing，也就是布局颠簸，就是指因为jq中的复杂操做而致使了过多的重绘以及重排。

二、jq比较对内存的消耗比较大，因为触发浏览器的垃圾回收，而过多的垃圾回收会影响动画的渲染效率。

上面的两点，第一点布局颠簸会致使动画在刚开始的时候比较卡顿，而垃圾回收则会影响动画运行的时候卡顿。

对于jq动画效率低的缘由我以为说的颇有道理，毕竟jq是一个你们伙，它须要处理的并不只仅是你这个动画的效果，它还要处理很庞大的功能，因此它在作动画的时候确定会遗留下一些接口供其它功能去调用，而这也确定会致使动画这一功能的效率变低。

接下来，文章谈到了css3动画性能好的缘由：

一、优化DOM操做

二、经过GPU开启硬件加速提升动画性能

对于第二点我查了以后发现是有问题的，css3的动画并不会自动的开启GPU加速，而是当你的css3动画中使用的3d变形的时候才会开启，因此有时候咱们能够经过一些hack手段来开启GPU加速

   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

而GPU虽说是加速了你的动画性能，但它确定也是有缺点的，而它的坏处即是会形成更多的内存与功耗，在手机上甚至会损耗电池寿命，因此这里提出了一个问题，不要单纯的为了开启硬件加速而随便乱用，那是不明智的。

因此假设咱们不开启GPU加速的话，css3的动画跟jq相比就是减小了DOM操做，减小了重绘重排吗？那么这样说的话对于于咱们原生写的js动画的话，只要咱们的js动画注意下代码优化以及重绘重排问题，是否是就能够媲美于不开启GPU加速的css3动画呢，固然我也不肯定，毕竟没有去查阅资料，只是总结别人的知识。

https://segmentfault.com/q/1010000000645415

而后我有看了这篇seg的文章，为了防止删了先截个图为证吧。

最后再补充点内容，说到了js上的动画性能，就要说下requestAminationFrame，这是一个新的接口，在ie10+以上支持，能够把它说成是setTimeout专门为js动画打造的一个升级版本。它的主要特色以下：

一、requestAnimationFrame 会把每一帧中的全部DOM操做集中起来，在一次重绘或回流中就完成，而且重绘或回流的时间间隔牢牢跟随浏览器的刷新频率，通常来讲，这个频率为每秒60帧。

二、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这固然就意味着更少的的cpu，gpu和内存使用量。