說說動畫卡頓的解決方案

時飛發布于2019-08-20 10:30 / 3549人閱讀

摘要：動畫卡頓解決方案前端時間用實現頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法

CSS3 動畫卡頓解決方案

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




    
    
    
    首頁加載動畫

在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硬件加速。

參考文章

深入瀏覽器理解CSS animations 和 transitions的性能問題

解決Chrome動畫”卡頓”的辦法

云服務器 GPU云服務器服務器卡頓解決方案徹底解決紅米手機卡頓發表說說的js代碼阿里云服務器卡頓怎么解決

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80180.html

說說動畫卡頓的解決方案

摘要：動畫卡頓解決方案前端時間用實現頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法 CSS3 動畫卡頓解決方案前端時間用animation實現H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

AlphaWatch 2019-08-29 11:09 評論0 收藏0
白鷺引擎王澤：重度H5游戲性能優化技巧標題的文章

摘要：據不完全統計，這五年中，白鷺引擎累計運轉的游戲和微信小游戲的流水數據約為億。我們的引擎架構師做某一沙龍活動的演講速記，純純的干貨，分享給大家。王澤：各位開發者下午好！我叫王澤，是白鷺引擎的首席架構師。今天給大家分享的題目是《重度H5游戲性能優化技巧》。之所以決定用這個題目，是因為我最近幾周在廣深一帶拜訪了很多使用白鷺引擎的開發者，發現特別是在廣州一帶，大部分開發者都在做重度H5游...

xbynet 2019-08-23 12:12 評論0 收藏0
flip你的動畫

摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動畫優化，理解本篇文章還是很簡單的。，元素的終止狀態。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執行，這樣兩個動畫就不會沖突了。在vue官方文檔上看到vue使用flip做動畫，就去研究了一下。這是一個準則，協調js和css對動畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫...

vibiu 2019-08-29 12:19 評論0 收藏0