CSS3 動畫卡頓解決方案

時間 2019-11-12

標籤 css3 css 動畫解決方案欄目 CSS 简体版

原文原文鏈接

爲何會卡頓？javascript

有一個前提必需要提，前端開發者們都知道，瀏覽器是單線程運行的。可是咱們要明確如下幾個概念：單線程，主線程和合成線程。雖說瀏覽器執行js是單線程執行（注意，是執行，並非說瀏覽器只有1個線程，而是運行時，runing），但實際上瀏覽器的2個重要的執行線程，這 2 個線程協同工做來渲染一個網頁：主線程和合成線程。通常狀況下，主線程負責：運行 JavaScript；計算 HTML 元素的 CSS 樣式；頁面的佈局；將元素繪製到一個或多個位圖中；將這些位圖交給合成線程。相應地，合成線程負責：經過 GPU 將位圖繪製到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計算出頁面中哪部分是可見的；計算出當你在滾動頁面時哪部分是即將變成可見的；當你滾動頁面時將相應位置的元素移動到可視區域。html

那麼爲何會形成動畫卡頓呢？前端

緣由就是主線程和合成線程的調度不合理。下面來詳細說一下調度不合理的緣由：java

在使用height，width，margin，padding做爲transition的值時，會形成瀏覽器主線程的工做量較重，例如從margin-left：-20px渲染到margin-left:0，主線程須要計算樣式margin-left:-19px,margin-left:-18px，一直到margin-left:0，並且每一次主線程計算樣式後，合成進程都須要繪製到GPU而後再渲染到屏幕上，先後總共進行20次主線程渲染，20次合成線程渲染，20+20次，總計40次計算。jquery

主線程的渲染流程，能夠參考瀏覽器渲染網頁的流程：程序員

使用 HTML 建立文檔對象模型（DOM）使用 CSS 建立 CSS 對象模型（CSSOM）基於 DOM 和 CSSOM 執行腳本（Scripts）合併 DOM 和 CSSOM 造成渲染樹（Render Tree）使用渲染樹佈局（Layout）全部元素渲染（Paint）全部元素web

也就是說，主線程每次都須要執行Scripts，Render Tree ,Layout和Paint這四個階段的計算。面試

而若是使用transform的話，例如tranform:translate(-20px,0)到transform:translate(0,0)，主線程只須要進行一次tranform:translate(-20px,0)到transform:translate(0,0)，而後合成線程去一次將-20px轉換到0px，這樣的話，總計1+20計算。chrome

可能會有人說，這才提高了19次，有什麼好性能提高的？假設一次10ms。那麼就減小了約190ms的耗時。會有人說，辣雞，才190ms，無所謂。那麼若是margin-left是從-200px到0呢，一次10ms，10ms199≈2s。還會有人說，辣雞，也就2s，無所謂。你忘了單線程這回事了嗎？若是網頁有3個動畫，32s=6s，就是6s的性能提高。因爲數據是猜想的，因此暫時不考慮其真實性瀏覽器

爲了加強本文的說服力，下面我就用一個實例來證明下個人觀點，你們一塊兒看一下

前端時間用 animation 實現 H5 頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留 700ms 後再縮小至頂部。代碼以下：

<!DOCTYPE html>
<html>
<head lang="zh-cn">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" >
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>首頁加載動畫</title>
  <head>
    <style>
      .welcome-main{
        display: none;        
        padding-bottom: 40px;      
      }
      .top-info{        
        width: 100%;        
        position: absolute;        
        left: 0;        
        top: 93px;      
      }
      .wec-img{
        width: 175px;        
        height: 175px;        
        position: relative;        
        padding: 23px;        
        box-sizing: border-box;        
        margin: 0 auto;      
       }
      .wec-img:before{        
        content: '';        
        position: absolute;        
        left: 0;        
        top: 0;        
        width: 100%;        
        height: 100%;        
        background: url("./images/kf-welcome-loading.png");        
        background-size: 100%;      
       }
      .wec-img .img-con{
        width: 100%;        
        height: 100%;        
        border-radius: 50%;        
        /*box-sizing: border-box;*/
        background: url("./images/kf_1.jpg");        
        background-size: 100%;        
        padding: 1px;      
      }
      .wec-img .img-con img{
        width: 100%;        
        height: 100%;        
        border-radius: 50%;      
      }
      .loaded .wec-img{
        -webkit-transform-origin: center top;      
      }        
      .loading.welcome-main{
        display: block;
      }
      .loading .wec-img{
        -webkit-animation:fadeIn .3s ease both;
      }
      .loading .wec-img:before{
        -webkit-animation:rotate .6s .2s linear both;      
      }
      .loaded .top-info{
        -webkit-animation:mainpadding 1s 0s ease both;      
      }
      .loaded .wec-img{
        -webkit-animation:imgSmall 1s 0s ease both;      }
      @-webkit-keyframes mainpadding{
        0%{-webkit-transform:translateY(0)  
      }
        100%{-webkit-transform:translateY(-87px)   
        }
      }      
      @-webkit-keyframes imgSmall{
        0%{
          width: 175px;          
          height: 175px;          
          padding: 23px;        
        }
        100%{          
          width: 60px;          
          height: 60px;          
          padding: 0;        
        }
      }      
      @-webkit-keyframes fadeIn{
        0%{opacity:0;-webkit-transform:scale(.3)}
        100%{opacity:1;-webkit-transform:scale(1)}
      }      
      @-webkit-keyframes rotate{
        0%{opacity:0;-webkit-transform:rotate(0deg);}
        50%{opacity:1;-webkit-transform:rotate(180deg);}
        100%{opacity:0;-webkit-transform:rotate(360deg);}
      }     
      </style>
    <body>
      <div class="welcome-main">
        <div class="top-info">
          <div class="wec-img"><p class="img-con"><img src="" alt=""></p></div>
        </div>
      </div>
      <script>
        $('.welcome-main').addClass('loading');
        setTimeout(function(){
          $('.hi.fst').removeClass('loading');
          $('.welcome-main').addClass('loaded');
        },700);
      </script>
    </body>
  </html>

在 chrome 上測試 ok，但在提測給 QA 的時候發現部分機型，如華爲(系統4.2)，oppo(系統5.1)的出現卡頓狀況。

百思不得其解，後來參考文章深刻瀏覽器理解 CSS animations 和 transitions 的性能問題一文，將圖片縮放中動畫元素改爲 transform，以下

@-webkit-keyframes imgSmall{
 0%{
   -webkit-transform:scale(1);
 }
 100%{
   -webkit-transform:scale(.465);
 }
}

果真啊，卡頓問題解決了。

文章深刻瀏覽器理解 CSS animations 和 transitions 的性能問題是這麼解釋的，現代的瀏覽器一般會有兩個重要的執行線程，這 2 個線程協同工做來渲染一個網頁：主線程和合成線程。

通常狀況下，主線程負責：運行 JavaScript；計算 HTML 元素的 CSS 樣式；頁面的佈局；將元素繪製到一個或多個位圖中；將這些位圖交給合成線程。

相應地，合成線程負責：經過 GPU 將位圖繪製到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計算出頁面中哪部分是可見的；計算出當你在滾動頁面時哪部分是即將變成可見的；當你滾動頁面時將相應位置的元素移動到可視區域。

假設咱們要一個元素的 height 從 100 px 變成 200 px，就像這樣：

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

主線程和合成線程將按照下面的流程圖執行相應的操做。注意在橘黃色方框的操做可能會比較耗時，在藍色框中的操做是比較快速的。

而使用 transform:scale 實現

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

此時流程以下：也就是說，使用 transform，瀏覽器只須要一次生成這個元素的位圖，並在動畫開始的時候將它提交給 GPU 去處理。以後，瀏覽器不須要再作任何佈局、繪製以及提交位圖的操做。從而，瀏覽器能夠充分利用 GPU 的特長去快速地將位圖繪製在不一樣的位置、執行旋轉或縮放處理。

爲了從數量級上去證明這個理論，我打開 chrome 的 Timeline 查看頁面 FPS

其中，當用 height 作動畫元素時，在切換過程的 FPS 只有 44，咱們知道每秒 60 幀是最適合人眼的交互，小於 60，人眼能明顯感受到，這就是爲何卡頓的緣由。

rendering 和 painting 所花的時間以下：

再來看看用 transform:scale

FPS 達到 66，且 rendering 和 painting 時間減小了 3 倍。

到此爲止問題是解決了，隔了幾天，看到一篇解決 Chrome 動畫」卡頓」的辦法，發現還能經過開啓硬件加速的方式優化動畫，因而又試了一遍。

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

驚人的事情發生了，FPS 達到 72：

總結解決 CSS3 動畫卡頓方案

儘可能使用 transform 當成動畫熟悉，避免使用 height,width,margin,padding 等；

要求較高時，能夠開啓瀏覽器開啓 GPU 硬件加速。

爲了幫助你們讓學習變得輕鬆、高效，給你們免費分享一大批資料，幫助你們在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給你們推薦一個前端全棧學習交流圈：866109386.歡迎你們進羣交流討論，學習交流，共同進步。

當真正開始學習的時候不免不知道從哪入手，致使效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術須要重點掌握，學習時頻繁踩坑，最終浪費大量時間，因此有有效資源仍是頗有必要的。

最後祝福全部遇到瓶疾且不知道怎麼辦的前端程序員們，祝福你們在日後的工做與面試中一切順利。