<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          CSS3動畫 相比JS Animation 哪個更快?

          時間:?2017-12-05閱讀:?1438標簽:?css3動畫
          CSS vs. JS Animation: 哪個更快?

          基于JavaScript的動畫竟然已經默默地比CSS的transition動畫快了?而且,Adobe和 Google竟然一直在發布可以媲美原生應用的富媒體移動站點?

          這篇文章將會逐點講解基于JavaScript的DOM動畫庫,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的動畫庫高效的。

          jQuery

          讓我們先從這個事實開始:JavaScript和jQuery被錯誤的混淆了。JavaScript的動畫是快的,但是jQuery的動畫慢。為什么?因為雖然jQuery很強大,但是它的目標從來不是為了成為一個高效的動畫引擎。

          • jQuery不能避免布局震蕩因為它的代碼除了動畫還提供了很多功能。

          • jQuery的內存消耗經常觸發垃圾回收,導致動畫卡住

          • jQuery使用setInterval而不是requestAnimationFrame (RAF)為了避免一些bug

          注意,布局震蕩引起了動畫開始處的卡頓,垃圾回收導致了動畫進行中的卡頓,RAF的缺席導致了幀率低。

          實現的例子

          避免布局震蕩,包括簡單地合并DOM查詢和DOM更新:

          var currentTop,
            currentLeft;
          
          /* 有布局震蕩 */
          currentTop = element.style.top; /* QUERY */
          element.style.top = currentTop + 1; /* UPDATE */
          
          currentLeft = element.style.left; /* QUERY */
          element.style.left = currentLeft + 1; /* UPDATE */
          
          /* 沒有布局震蕩 */
          currentTop = element.style.top; /* QUERY */
          currentLeft = element.style.left; /* QUERY */
          
          element.style.top = currentTop + 1; /* UPDATE */
          element.style.left = currentLeft + 1; /* UPDATE */
          

          發生在更新之后的查詢會強制瀏覽器立馬重新布局,并計算給出頁面樣式的計算值(把更新的影響考慮在內)。這對于運行于16ms間隔的動畫來講,會產生巨大的開銷。

          同樣,實現RAF并不需要對既有代碼改動很大。讓我們來對比一下RAF的實現和setInterval的實現:

          var startingTop = 0;
          
          /* setInterval: 每16ms運行一次來達到60fps (1000ms/60 ~= 16ms). */
          setInterval(function() {
            /* 由于這里的代碼會在1s內執行60次,所以我們把top屬性每秒1單位的增長分成60份 */
              element.style.top = (startingTop += 1/60);
          }, 16);
          
          /* requestAnimationFrame: 不管瀏覽器是否處于最優狀態,都試圖運行在60fps */
          function tick () {
              element.style.top = (startingTop += 1/60);
          }
          
          window.requestAnimationFrame(tick);
          

          RAF極大限度地提高了動畫的性能。而您只需要修改為數不多的代碼。

          CSS Transitions

          CSS transitions的動畫性能優于jQuery,它把動畫的邏輯交給了瀏覽器本身。這會有助于:1)優化DOM交互和內存消耗以避免卡頓,2)在底層借助RAF的特性,3)強制硬件加速(借助GPU的能力來提高動畫性能)。

          然而,實際情況是,這些優化可以直接通過JavaScript來實現,GSAP已經致力于此多年。Velocity.js,一個新的動畫引擎,不止借助于上述技術,還應用了其他方法--我們將很快探討。

          明白JavaScript動畫可以媲美CSS動畫庫這一事實,只是我們計劃的第一步。第二步是我們要明白JavaScript動畫可以比CSS動畫還快。

          讓我們從檢查CSS動畫庫的缺陷開始:

          • Transitions的強制硬件加速是使GPU加速,然而這反而會導致GPU強壓狀況下動畫的卡頓。這些影響在移動設備上更為嚴重。(特別地,這個卡頓是由于數據在瀏覽器的主線程和排序線程間傳遞的開銷導致的。一些CSS屬性,比如transforms和opacity,是不受這個開銷影響的。)Adobe在這里闡述了這個問題。

          • Transitions在IE10以下有兼容問題, 這在PC端站點會很容易導致問題發生,因為IE8和IE9依然很流行

          • 因為transitions并不是被JavaScript控制(它們只是被JavaScript觸發),瀏覽器并不知道如何同步地使用JavaScript代碼來操控優化transitions。

          相反地:基于JavaScript的動畫庫,可以自己決定什么時候使用硬件加速,可以兼容所有版本的IE,并且它們非常適合批量動畫優化。

          我的建議是,當您只是開發移動站點,并且您的動畫只包含簡單的狀態變化時,可以使用原生CSS transitions。在這種情況下,transitions算是一種高效并且原生的解決方案,并且可以把所有的動畫邏輯只放在css中,避免了因為引入JavaScript庫而導致頁面臃腫。但是,如果您正在設計復雜的UI,或者正在開發具有狀態UI的應用程序,請使用JavaScript動畫庫,它可以使您的動畫保持高性能,使您的工作流程保持可控。特別是在管理CSStransitions方面做得很棒的一個庫是 Transit

          JavaScript Animation

          Okay,所以JavaScript在性能上可以占上風。但是JavaScript究竟可以快多少呢?其實,它已經快到可以創建復雜的,通常只能用WebGL構建的3D animation demo。已經快到可以創建通常只能用Flash或者影效處理做到的multimedia teaser。已經快到可以創建通常只能用canvas構建的virtual world

          為了直觀比較動畫庫的領先性能,包括Transit(內部使用CSS transitions),請查閱Velocity的文檔,在VelocityJS.org

          依然存在問題:JavaScript究竟如何達到高性能?下面是基于JavaScript的動畫庫能實現的優化列表:

          • 為了減小布局震蕩,將整個動畫中涉及到DOM同步化到堆棧中。

          • 緩存鏈式調用中的屬性值,以盡量減少DOM查詢(它是影響DOM動畫性能的致命弱點)的發生。

          • 在同一個跨同級元素調用中緩存單位轉換比率(例如PX到%、em等)。

          • 當樣式更新在視覺上不明顯時,跳過更新。

          回顧之前講的布局震蕩,Velocity.js利用這些最佳實踐來緩存動畫的結束值,這些值會被重用為之后動畫的開始值,從而避免再次查詢DOM元素的初始值:

          $element
            /* 將元素向下滑動到視圖中。 */
            .velocity({ opacity: 1, top: "50%" })
            /* 延遲1000ms,元素滑動出視圖 */
            .velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });
          

          在上面的例子中,第二個Velocity自動知道它應該從opacity為1,top為50%開始。

          瀏覽器最終可以自己執行很多相同的優化,但這樣做將需要極大地限制開發人員編寫動畫代碼的方式。因此,同樣的原因,jQuery不使用RAF(見上文),瀏覽器也永遠不會強加優化,即使這些優化只有非常小的可能會打破規范或偏離預期的行為。

          最后,讓我們來比較一下這兩個JavaScript動畫庫(Velocity.js和GSAP)。

          • GSAP是一種快速、功能豐富的動畫平臺。Velocit是一個輕量級工具,可以極大地提高UI動畫性能和工作流程。

          • GSAP需要許可費。Velocity是通過許MIT開源的。

          • 性能都很優異,GSAP和Velocity在真實項目中沒有區別。

          我的建議是:當您需要精確的控制(例如重映,暫停/恢復/搜索)、運動(例如Bezier曲線路徑),或復雜的分組/排序時,使用GSAP。這些特性對于游戲開發和某些niche應用非常重要,但在Web應用程序的UI中并不常見。

          Velocity.js

          定位GSAP功能豐富,并不意味著Velocity功能單一。相反地,在壓縮后只有7Kb的文件中,Velocity不僅提供了jQuery$.animate()的所有功能,而且提供了color animation,transforms,loops,easings,class animation和scrolling。

          簡而言之,Velocity是jQuery、jQuery UI和CSStransitions的最佳組合。

          進一步,從方便的角度,Velocity在底層使用jQuery的$.queue()方法,因此可以無縫地與jQuery的$.animate(), $.fade()和$.delay()函數交互。并且,由于Velocity的語法和$.animate()一致,您頁面的代碼不需要修改

          讓我們快速看一下Velocity.js。在基礎動畫上,Velocity和$.animate()一樣:

          $element
            .delay(1000)
            /* 使用Velocity的2000ms內改變元素top屬性的動畫*/
            .velocity({ top: "50%" }, 2000)
            /* 當上面Velocity動畫執行完時,使用標準的jQuery方法來使元素淡出*/
            .fadeOut(1000);
          

          在高級動畫上,復雜的滾動場景和三維動畫都可以創建——只需要兩行簡單的代碼:

          $element
            /* 在1000ms內,瀏覽器滾動到這個元素的頂部 */
            .velocity("scroll", 1000)
            /* 之后使元素繞著它的Y軸旋轉360度。 */
            .velocity({ rotateY: "360deg" }, 1000);
          

          結束語

          Velocity的目標是保持領先的DOM動畫性能和便捷。本文的重點是前者。請去VelocityJS.org學習更多關于后者的知識。

          在我們結束之前,記得*一個高性能的UI不僅僅是選擇合適的動畫庫。頁面的其余部分也應該優化。從下面這些奇妙的Google話題中學習更多:

          原文鏈接:https://davidwalsh.name/css-js-animation
          翻譯來源:http://www.zcfy.cc/article/css-vs-js-animation-which-is-faster-4635.html?t=new
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/217

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网