2. 程式人生 > >兄dei，聽說你動畫很卡？

兄dei，聽說你動畫很卡？

阿新 • • 發佈：2018-11-19

導語: 幾個星期前，因為公司活動，需要做一個比較炫酷的H5動畫, 一頓猛如虎的coding之後，發現執行起來卡成狗，當時絕望的想要出家，還好組內有經驗比較豐富的動畫大神幫忙調整，順利度過難關。

作為一個有追求的程式設計師！！！痛定思痛！！！同樣的悲劇絕對不能在同一個技術面發生兩次！！！流著淚寫下該篇總結，希望可以給大家一些啟發。

本文目錄:

為什麼動畫會有卡頓感?

回答這個問題前，我們應該要明白一個問題，為什麼我們會感到動畫在動

？

  1. 動畫的實現原理，是利用了人眼的“視覺暫留”現象，在短時間內連續播放數幅靜止的畫面，使肉眼因視覺殘象產生錯覺，而誤以為畫面在“動”。

  1. 大多數裝置的重新整理頻率是 60 次/秒，（1000/60 = 16.6ms）也就說是瀏覽器對每一幀畫面的渲染工作要在 16ms 內完成，超出這個時間，頁面的渲染就會出現卡頓現象，影響使用者體驗。

綜上，我們或覺得動畫卡，一個很大的原因就是因為 FPS(幀率) 過低導致，也就是說每一幀的畫面不能的保證在16ms之內完成渲染工作，所以我們會覺得卡頓。

解釋清楚了會感到卡頓的原因，大家是不是很好奇每一幀的渲染過程到底發生了什麼會導致它的渲染時間超過 16ms

?

現在進入到我們的第二部分，瀏覽器渲染繪製過程

瀏覽器渲染繪製過程

以Webkit的渲染流程為例分析下瀏覽器:

簡單概括為如下幾步:

  • 處理HTML標記資料並生成DOM樹。

  • 處理CSS標記資料並生成CSSOM樹。

  • 將DOM樹與CSSOM樹合併在一起生成渲染樹。

  • Layout（佈局）：計算每個 DOM 元素在最終螢幕上顯示的大小和位置。由於 web 頁面的元素佈局是相對的，所以其中任意一個元素的位置發生變化，都會聯動的引起其他元素髮生變化，這個過程叫 reflow (迴流 or 重排)。

  • Paint（繪製）：在多個層上繪製 DOM 元素的的文字、顏色、影象、邊框和陰影等。

  • composite（渲染層合併）：按照合理的順序合併圖層然後顯示到螢幕上。

每一幀的渲染經過如上步驟，呈現在使用者的眼前，當這些步驟時間的總和 > 16ms, 使用者就會有卡頓感產生。

在 動畫效能分析 部分，會重點結合Layout, Paint, composite 部分來具體分析動畫卡頓的原因及優化方式，在此之前，我們先了解下強大的 chrome 提供的效能分析工具，以便我們更好分析問題。

強大的chrome效能分析工具介紹

  • performance

使用 Performance 工具時，為了規避其它 Chrome 外掛對頁面的效能影響，我們最好在無痕模式下開啟頁面

點選左上角實心圓開始錄製，看下效能分析面板。

重點介紹下圖中標紅處:

FPS：這是一個和動畫效能密切相關的指標，它表示每一秒的幀數。圖中綠色柱狀越高表示幀率越高，體驗就越流暢。若出現紅色塊，則代表長時間幀，很可能會出現卡頓。圖中以綠色為主，偶爾出現紅塊，說明網頁效能並不糟糕，但仍有可優化的空間。

CPU：表示CPU的使用情況，不同的顏色片段代表著消耗CPU資源的不同事件型別。這部分的影象和下文詳情面板中的Summary內容有對應關係，我們可以結合這兩者挖掘效能瓶頸。

summary: 渲染過程中，每個部分的耗時佔比。

  • Layers

是不是已經被這個高逼格的介面深深震撼到了！！！

重點看下 Paint flashing, Layer borders, FPS meter:

  • Paint flashing: 標記當前正在重繪的元素，（元素會被一個綠色的半透明遮罩蒙上），如上圖;

  • Layer borders: 複合層

    1. 黃色邊框: 有動畫 3d 變換的元素，表示放到了一個新的複合層（composited layer）中渲染。
    2. 藍色的柵格：這些分塊可以看作是比層更低一級的單位，這些區域就是 RenderLayer。

  • FPS meter: GPU效能監控

    1. Frame Rate: 幀率。
    2. GPU Raster：GPU 光柵（預設開啟）。
    3. GPU Memory: GPU 使用率。

綜上就是對 chrome 一些效能分析工具的簡單介紹，說了這麼多！！！讓我們寫一些動畫實操一下吧！！！

下面就進入我們最最重要的部分！！！動畫效能分析實戰

動畫效能分析實戰

在瀏覽器中開啟如下程式碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .react {position: absolute;width: 100px;height: 100px;background: #f00;animation: react-run 3s linear 0s infinite;}
        @keyframes react-run {
            0% { top: 0px;left: 0px;}
            25% {top: 0px;left: 200px;}
            50% {top: 200px;left: 200px;}
            75% {top: 200px;left: 0px;}
            100% {top: 0px;left: 0px;}
        }
    </style>
</head>
<body>
    <div class="react"></div>
</body>
</html>
複製程式碼

執行結果:

  • Layers

  • performance

效能分析:

  1. 圖中移動的小方塊在不停的重排重繪過程中。

  2. GPU 的記憶體使用率為2.4 ～ 4.9 之間。

  3. 一秒內重排和重繪的耗時分別為7.3ms和4.9ms。

這裡還有個值得注意的點:

  • 每次元素移動到光柵處，記憶體都會變大一倍從2.4變為4.9。

如下圖:

圖層被光柵化後，分塊存入GPU的記憶體中，當元素跨光柵移動時，兩塊記憶體都在變化，所以消耗自然加倍啦！！！

好，現在讓我們開啟傳說中的 3D引擎加速！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .react {position: absolute;
        width: 100px;
        height: 100px;
        background: #f00;
        animation: react-run 3s linear 0s infinite;
        transform: translate3d(0, 0, 0);
        }
        
        @keyframes react-run {
            0% {transform: translate3d(0, 0, 0);}
            25% {transform: translate3d(200, 0, 0);}
            50% {transform: translate3d(200, 200, 0);}
            75% {transform: translate3d(0, 200, 0);}
            100% {transform: translate3d(0, 0, 0);}
        }
    </style>
</head>

<body>
    <div class="react"></div>
</body>

</html>
複製程式碼

執行結果:

  • Layers

  • performance

效能分析:

  1. 圖中移動的小方塊沒有發生重排和重繪，只有一個圖層合併。

  2. GPU 的記憶體使用率幾乎為0。

  3. 一秒內重排和重繪的耗時分別為0ms和0ms，圖層合併時間為89us。

比較上述兩種寫法可以得處: 開啟GPU加速時的動畫效能要比不開啟高效。

  • 未開啟GPU加速：
  • 開啟GPU加速：

寫到這裡，大家可能會有疑問，為什麼開啟GPU加速就沒有發生重排和重繪 ？是不是所有動畫全部都開啟GPU加速，就會變的很快？

下面就來分析這兩個問題:

1. 為什麼開啟GPU加速就沒有發生重排和重繪 ?

觀察上圖:

在開啟GPU加速時，運動的紅色方塊開啟了新的合成層，所以不用再重排和重繪，只需要一個合成圖層的時間。

2. 是不是所有動畫全部都開啟GPU加速，就會變的很快？

因為開啟GPU加速後會建立新的圖層，新的圖層就需要一定的記憶體空間，而且圖層在合成時，圖層越多耗費的時間肯定也是越多的，所以瘋狂的開啟GPU加速，不但不能解決效能問題，反而可能會帶來效能問題。

如下 (GPU記憶體使用較高)：

綜上所述: 合理的開啟GPU加速，建立新的合成層，可以給效能帶來很大的提升。

那麼，都有那些放法建立新的合成層呢？

親測有效的方法:

  • 使用css屬性:

    1. transform: translate3d(0, 0, 0);
2. will-change: '將會發生變化的屬性';
複製程式碼

  • 標籤:

    <video></video>
<canvas></canvas>
複製程式碼

總結

通過此篇文章，我們應該對動畫效能分析有一個比較系統的認識:

  1. 為什麼會有卡頓感產生？
  2. 瀏覽器每一幀的渲染工作是怎麼進行的？
  3. 如何使用chrome開發工具對動畫效能進行分析？
  4. GPU加速和普通渲染的區別在哪裡？
  5. 我們應該如何開啟GPU加速？

動畫卡頓問題的分析，不像是查詢js上的bug，有邏輯可尋，所以在遇到問題時，我們只有明白底層的原理，結合分析工具，才能更好的發現問題。

相關推薦

兄dei，聽說你動畫很卡？

導語: 幾個星期前，因為公司活動，需要做一個比較炫酷的H5動畫, 一頓猛如虎的coding之後，發現執行起來卡成狗，當時絕望的想要出家，還好組內有經驗比較豐富的動畫大神幫忙調整，順利度過難關。 作為一個有追求的程式設計師！！！痛定思痛！！！同樣的悲劇絕對不能在同一個技術面發生兩次！！！流著淚寫下該

電腦越用越久，已經變得很卡頓的幾個有效加快運行的方法

單擊 朋友 例如 最大值和最小值 更改 卻又 存儲設備 就會 移動 很多朋友在使用電腦的時候，隨著時間越久，就會忽然發現電腦變得越來越卡頓，點開某個軟件要等半天，玩遊戲又加載不進去，動畫人物動作緩慢不流暢，仔細檢查電腦卻又未曾中病毒，那麽電腦越來越卡頓該怎麽辦呢，當然最有效

最全信用卡養卡攻略，讓你成為用卡高手

在用卡過程中,難免會有人犯一些小錯誤,導致臨時額度提不上去,或者被銀行警告惡意套現等。怎麼養好卡呢？ 　　在用卡過程中,難免會有人犯一些小錯誤,導致臨時額度提不上去,或者被銀行警告惡意套現等。 　　怎麼養好卡呢？小編今天來教你幾招~ 　　什麼叫養卡？ 　　一般的養卡是指多刷卡多消費，並且及時還款，

解決虛擬機器硬碟佔用過大，導致物理機很卡的問題

非固態硬碟的電腦，開啟虛擬機器時候可能會遇到虛擬機器佔用磁碟資源過高的問題。在使用虛擬機器黑蘋果時候尤其明顯。 我是在虛擬機器vm11和vm12上進行的操作，其他版本不知。 解決方法如下：【這個解決方法是我在別人的部落格上找的，希望能幫到別人】 處理vmdk目錄

Android Studio電腦配置很高，用起來還是很卡？

新年新氣象，年後換了公司，終於又可以專心的做安卓開發了，可以開發新的app，學習新的語言(Kotlin)，熟悉新的環境，認識新的同事和朋友，一切都要向前看，美好的未來就在不遠處等著我們，只要專心擼碼廢話不多說，言歸正傳，雖然電腦配置很高，但是用起來感覺還是不是那麼的爽，尤其是

奇葩之反人類職場面試題，兄dei~ 你造嗎？

　最近，美國職業教練和再就業顧問網路Five O'Clock Club詢問了會員和客戶，想了解他們在2015年聽到了哪些最有挑戰性的面試問題。   　　彙集上來的題目還真是奇葩。下面一起來看看吧，我們順便告訴你如何去拆解它們。   　　奇葩題：“如果讓你去擦西雅圖

在Docker Hub上你可以很輕松下載到大量已經容器化的應用鏡像，即拉即用——daocloud國內鏡像加速

服務器 賬號 托管 網絡延遲 版本過低 tag 四種 啟動腳本 大量 Docker之所以這麽吸引人，除了它的新穎的技術外，圍繞官方Registry（Docker Hub）的生態圈也是相當吸引人眼球的地方。 在Docker Hub上你可以很輕松下載到大量已經容器化的應用鏡像，

你還有用360清理你的電腦垃圾嗎？別用了，這樣只會越來越卡！

軟件 src 雙擊 殺毒軟件 搜索框 垃圾 電腦 tps 運行 對於電腦來說我們一般都是需要定期去清理垃圾，否則的話電腦的運行速度只會越來越慢的，想要將電腦進行文件的清理，小編問你們平時都是怎麽處理的呢？不說小編也知道，無非就是使用360殺毒軟件或者是騰訊電腦管家去進行操作

超級絢麗，20款前端動畫特效，轟炸你的眼睛

前端 特效 html css 源碼 前言 HTML5一個相當出色的web技術，它不僅可以讓你更加方便地操縱頁面元素，而且可以通過canvas實現更多的動畫特效，引進HTML5標準後，CSS3也就可以發揮更大的作用。本文主要介紹了一些基於HTML5 Canvas的動畫特效，分享給大家，希望

這樣玩雲函式路由，讓你看起來很高階

歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~ 本文由李成熙heyli發表於雲+社群專欄 概念回顧 在掘金開發者大會上，在推薦實踐那裡，我有提到一種雲函式的用法，我們可以將相同的一些操作，比如使用者管理、支付邏輯，按照業務的相似性，歸類到一個雲函式裡，這樣比較方便管理、排查問題以及

這樣玩雲函數路由，讓你看起來很高級

開發者 實戰 技術分享 ctr login 發布 以及 new t github 歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐幹貨哦~ 本文由李成熙heyli發表於雲+社區專欄 概念回顧 在掘金開發者大會上，在推薦實踐那裏，我有提到一種雲函數的用法，我們可以將相同

分享5個超級一流的黑科技軟體，每個功能都很強大，你值得擁有！

1.Convertow   一個線上免費的不同檔案轉換工具。支援多種圖片格式轉換為PDF，方便使用者輕鬆實現各種需求轉換，無需安裝任何外掛或軟體即可實現。同時支援TIFF、PNG、JPG、BMP檔案轉換為PDF，也可以在圖片的不同格式間進行轉換，例如JPG到PNG、PNG到J

必須拿下的java面試題，來過一篇，看你卡到第幾題？

必須拿下的java面試題，來過一篇，看你卡到第幾題？ 靜態方法只能訪問靜態成員，例項方法可以訪問靜態和例項成員。之所以不允許靜態方法訪問例項成員變數，是因為例項成員變數是屬於某個物件的，而靜態方法在執行時，並不一定存在物件。靜態方法中也不能使用關鍵字this。 倒排索引 In

要聽 1001 個支付故事，這次你估計不用花錢

1001 是 一千零一 1001 是 二進位制 9 1001 是  1 0 0 1

肖特基二極管使用率很高，但你不一定能用對

制作 異步 rds 打開 然而 技術分享 info 無法 控制 　　肖特基二極管是最基本的電路器件，大家經常使用，但你未必能用對，未必能用好。比如說大家都知道接口部分一般都需要ESD保護，其實T肖特基二級管用作ESD保護就極為講究，對於USB3.0,HDMI接口等高速器

肖特基二極體使用率很高，但你不一定能用對

  　　肖特基二極體是最基本的電路器件，大家經常使用，但你未必能用對，未必能用好。比如說大家都知道介面部分一般都需要ESD保護，其實T肖特基二級管用作ESD保護就極為講究，對於USB3.0,HDMI介面等高速器件，要特別關注肖特基二極體上的結電容引數，一般根據訊號速率選取幾個pf，如果

#程式設計師從來不炫富，他們炫的很低調，你絕對看不懂！

程式設計師的工作就是每天在鍵盤上敲敲打打，一天到晚和程式碼打交道，雖然程式設計師的工資非常高，但是程式設計師們從來都不炫富，他們炫的很低調，你絕對不懂。   第一，程式設計師炫身體。 我們知道程式設計師需要經常的加班，甚至連續加幾天通宵加班，累了就在辦公室打地鋪休息，這樣

java面試第一次問題，時間沒把握好，有點緊張，其實都是很簡單的題，筆試感覺良好，面試可能回答不太滿意，繼續加油，建議初學者把基礎學紮實，葵花寶典你值得擁有

筆試題： 1、描述一下JVM載入class檔案的原理機制? 2、靜態變數和例項變數的區別？ 在語法定義上的區別：靜態變數前要加static關鍵字，而例項變數前則不加。 在程式執行時的區別：例項變數屬於某個物件的屬性，必須建立了例項物件，其中的例項變數

26個英文字母的另一種讀法，讓你更容易聽懂

近期看了不少關於戰爭的電影和電視劇，不過都是英文為主的，就當學英語了。裡面經常會說一些軍用的詞彙，簡潔明瞭，感覺碉堡了，就像國內的黑話和切口一樣。例如那款FPS單機遊戲《三角洲部隊》，英文名是《Delta force》，其實Delta是D的另一種讀法。所以查了查這些次的意思，原來是一些縮寫或者特定用詞防止混淆

正則表示式真的很騷，可惜你不會寫！！！

本文旨在用最通俗的語言講述最枯燥的基本知識 文章提綱： 元字元 重複限定符 分組 轉義 條件或 區間 正則表示式在幾乎所有語言中都可以使用，無論是前端的JavaScript、還是後端的Java、c#。他們都提供相應的介面/函式支援正則表示式。