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和內存使用量。