<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動畫

          時間:?2017-11-14閱讀:?1629標簽:?css3動畫

          小伙伴們在寫CSS3動畫時,會發現在手機上很多時候會感到卡頓,然后Google到的解決方案大多是開啟GPU加速transform: translate3d(0,0,0); 可解決,但是為什么開啟GPU加速就能讓動畫順滑呢?


          我們從瀏覽器內部去理解下

          JS是單線程的,但是瀏覽器可以開啟多個線程,渲染一個網頁需要兩個重要的線程來共同完成:

          Main Thread 主線程
          Compositor Thread 繪制線程


          主線程的工作: 

          運行JS 
          計算 HTML 元素的 CSS 樣式 
          布局頁面 
          將元素繪制到一個或多個位圖中 
          把這些位圖交給 Compositor Thread 來處理


          繪制線程的工作: 

          通過 GPU 將位圖繪制到屏幕上 
          通知主線程去更新頁面中可見或即將可見的部分的位圖 
          計算出頁面中那些部分是可見的 
          計算出在滾動頁面時候,頁面中哪些部分是即將可見的 
          滾動頁面時將相應位置的元素移動到可視區


          我們知道如果長時間的執行 JS 會阻塞主線程,頁面就會出現各種的卡頓。 而繪制線程會盡量的去響應用戶的交互,頁面發生變化時,繪制線程會以每秒60幀(因為每秒60幀是最適合人眼的交互,小于60就會明顯感覺到卡頓了)的間隔不斷重繪頁面。


          GPU 在如下方面很快: 

          繪制位圖到屏幕上 
          可不斷的繪制相同的位圖 
          將同一位圖進行位移、旋轉、縮放 (就是動畫) 
          但是在將位圖加載到GPU內存中有點慢


          關于兩張圖的正題來了

          PS: 橙色方框的操作比較耗時,綠色方框的操作比較快速_  

          div {
              height: 100px;
              transition: height 1s linear;
          }
          
          div:hover {
              height: 200px;
          }


          一個從height: 100px到height: 200px的動畫按照下面的流程圖來執行各種操作


          圖中有那么多的橙色方框,瀏覽器會做大量的計算,動畫就會卡頓。

          因為每一幀的變化瀏覽器都在進行布局、繪制、把新的位圖交給 GPU 內存(這恰好是我們上面提到的GPU的短板)

          雖然只改變元素高度但是很可能要同步改變他的子元素的大小,那瀏覽器就要重新計算布局,計算完后主線程再來重新生成該元素的位圖。


          使用 transform 屬性的動畫

          div {
              transform: scale(0.5);
              transition: transform 1s linear;
          }
          div:hover {
              transform: scale(1.0);
          }


          流程圖如下


          很明顯,這么少的橙色方框,動畫肯定會流暢。

          因為transform屬性不會改變自己和他周圍元素的布局,他會對元素的整體產生影響。

          因此,瀏覽器只需要一次生成這個元素的位圖,然后動畫開始時候交給 GPU 來處理他最擅長的位移、旋轉、縮放等操作。這就解放了瀏覽器不再去做各種的布局、繪制等操作。


          chrome中執行對比

          把上面的demo代碼在瀏覽器中執行下看下效果,demo地址:http://ccforward.github.io/demos/css/animation.html

          原文作者:@ccforward
          原文鏈接:https://github.com/ccforward/cc/issues/42


          站長推薦

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

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

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

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

          css3動畫的性能優化_針對移動端卡頓問題

          主要講的是怎樣制作流暢動畫,特別是針對移動端。在這里我首先介紹制作動畫的幾種方法的優缺點;接著會著重介紹用css3制作動畫的注意事項,包括:用canvas、css3、jquery制作動畫;css3在移動端卡頓問題;動畫過程有閃爍問題(一般出現在動畫開始)

          不定高度的元素實現transition動畫_如何為height:auto的div添加css3過渡動畫

          一個元素不設置高度時,height的默認值是 auto,瀏覽器會自動計算出實際的高度。那么如何為一個height:auto的元素添加 CSS3動畫呢?可以通過JS 獲取精確的 height 值,或者使用max-height 代替 height。

          css制作簡單loading動畫效果【css3 loading加載動畫】

          loading的制作需要一些比較高深的web動畫技術,后來發現大多數loading都可以用“障眼法”做出來。比如一個旋轉的圓圈,并不都是將gif圖放進去,有些就是畫個靜止圖像,然后讓它旋轉就完了。gif圖也可以,但是加載時間比較長。CSS的animation可以做出大多數的loading

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

          基于JavaScript的動畫竟然已經默默地比CSS的transition動畫快了?而且,Adobe和 Google竟然一直在發布可以媲美原生應用的富媒體移動站點?這篇文章將會逐點講解基于JavaScript的DOM動畫庫,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的動畫庫高效的。

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

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

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

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