TQ：動感影集是QQ空間新功能，可以將靜態(tài)的圖片輕松轉(zhuǎn)變?yōu)閯討B(tài)的視頻集，且載體是HTML5（簡稱H5）頁面，意味著可以隨時分享到空間或朋友圈給好友欣賞。移動端區(qū)別于PC年代的相冊視頻，由于設(shè)備性能限制，每一個動畫細(xì)節(jié)都需要認(rèn)真優(yōu)化，今天就來說說動感影集開發(fā)過程中的動畫性能檢測與優(yōu)化的問題。

一、先利其器 —— Chrome Timeline&Rendering

性能分析前，我們先看看工具。Chrome瀏覽器帶來的兩個工具是發(fā)現(xiàn)性能問題的利器，它們是Timeline和Rendering。

Timeline

Timeline是一款基于錄制的工具，通過錄制在瀏覽器中的一系列操作，系統(tǒng)會記錄這個過程的所有細(xì)節(jié)數(shù)據(jù)，包括js計算、頁面重繪、復(fù)合層消耗等，同時還保存著這個過程每一幀的截圖。

使用方法：

打開Chrome開發(fā)者工具，選擇Timeline。點擊左上角小圓點錄制操作，然后在要檢測的頁面上做一系列交互操作，結(jié)束后再次點擊圓點停止，最后操作期間的一系列數(shù)據(jù)就會以圖表等的形式呈現(xiàn)在面板中。

它有四種事件，對應(yīng)四個顏色。如下圖，網(wǎng)絡(luò)和DOM解析(藍(lán)色)，JavaScript計算(黃色)，樣式重計算和布局(紫色)以及繪畫和合成(綠色)事件。

它有三個模式：幀模式、事件模式和內(nèi)存模式。

（1）幀模式

幀模式需要選中幀視圖(柱形圖按鈕)開啟。該模式是檢查動畫性能最常用的模式。

注意到，幀查看器有兩條分界線，分別是30fps和60fps。

這需要我們重溫fps（每秒傳輸幀數(shù)）的概念：

• 若動畫表現(xiàn)fps大于60，則超越了人眼能反映的刷新頻率；
• 如果fps小于30，則卡頓明顯；

也就是說fps要保證接近60才能保證流暢。點擊這里可以看到30fps和60fps的明顯區(qū)別。回歸到幀模式柱狀圖，不難看出柱狀圖柱高越小表示動畫越流暢。

同時通過點擊柱狀圖還可以看到CPU、內(nèi)存的詳情，以及找到對應(yīng)腳本和結(jié)點定位。

基本用法：

• 點擊錄制->開始頁面動畫->結(jié)束錄制
• 通過查看柱狀圖記錄出哪些柱比較高（性能差）
• 點擊柱圖定位事件記錄，結(jié)合詳情數(shù)據(jù)找出性能卡頓的原因

（2）事件模式和內(nèi)存模式

事件模式需要點擊事件按鈕開啟（如圖左側(cè)藍(lán)色），而內(nèi)存模式是可以同時顯示在幀模式或事件模式中，只需要勾選Memory面板即可。

事件模式是以事件為導(dǎo)向，觀察錄制間操作的事件經(jīng)過，方便定位哪個操作占用的事件比較頻繁。同時結(jié)合內(nèi)存面板，可以看得出哪個事件消耗的內(nèi)存最大，有沒有合理地進(jìn)行垃圾回收（GC）。

同時注意到這里勾選了Screenshots面板，這個面板記錄了過程間的屏幕截圖，更方便定位有性能問題的操作區(qū)間，發(fā)現(xiàn)問題所在。

Rendering

Rendering處于開發(fā)者工具的隱藏面板中，打開Chrome開發(fā)者工具然后按ESC鍵打開。

它有四個功能：

開啟繪制閃爍提示。這功能會讓頁面在渲染的時候閃爍綠色，你可以借此增刪元素查看哪些元素是繪制消耗最大的。（該功能替代了舊版的Show paint rectangles+Enable continuous page repainting，Chrome46。）

顯示層塊邊框。這功能會讓所有層塊元素展示黃色的邊框，可以方便定位元素的布局是否合理。

顯示FPS計量器。這功能會在頁面右上角展示一個FPS計量器，實時展示FPS數(shù)，可以方便地在做一系列操作的時候發(fā)現(xiàn)性能瓶頸卡在哪里。

展示滾動表現(xiàn)。這功能是使頁面滾動變得緩慢，對觸摸和滾動事件的監(jiān)聽會使?jié)L動延遲，可以通過這個功能查看滾動時期的瓶頸。

二、洞察技巧 —— 如何發(fā)現(xiàn)性能問題

上面說了性能分析的工具，下面應(yīng)該說說檢測動畫性能問題的辦法。動畫性能分析主要用到Timeline幀模式+Rendering的開啟繪制閃爍和顯示層級邊框功能。

用法1：檢查卡頓情況

打開幀模式，點擊錄制按鈕，開始錄制頁面操作，之后結(jié)束錄制，查看柱狀圖。發(fā)現(xiàn)低于60fps的柱形，點擊具體的幀率柱，查看記錄詳情，根據(jù)左邊的信息定位問題所在，如下圖：

用法2：查看層級與多余布局塊

有時候感覺頁面卡，可能會是因為層塊多沒有處理好顯隱。可以通過功能面板的paint選項卡開啟渲染截圖。

該功能開啟后，再次錄制操作，結(jié)束后可以在詳細(xì)數(shù)據(jù)面板看到每一個柱形圖的即時渲染截圖，通過移動和查找可以看出哪些塊是不應(yīng)該出現(xiàn)的，從而把它解決掉。

用法3：查看多余或重復(fù)渲染的結(jié)點

勾選Rendering中的Enable paint flashing和Show layer borders。直接操作頁面，可以看到操作期間是否會有意料之外的塊狀渲染（渲染的結(jié)點會呈現(xiàn)綠色框框），若有問題則刪除多余結(jié)點再次嘗試，逐漸定位出有問題的結(jié)點。

以上三個功能可以幫助你發(fā)現(xiàn)很多性能的問題。

三、江湖事跡 —— 動感影集性能案例

說了那么多，現(xiàn)在就來分享三個開發(fā)過程中的簡單性能案例。

1. 封尾擴(kuò)散動畫

動感影集的封尾頁會用到一個通用的頁尾，動畫很簡單，是一個圈圈由中間向兩邊擴(kuò)散。實現(xiàn)也很快，馬上會想到border動畫，把border由0px->1000px，在PC看沒問題，于是就有了這個。

但是，在小米2S看的時候就發(fā)現(xiàn)結(jié)束的時候十分卡，看了下前面的元素都是漸現(xiàn)動畫，不可能呀，于是用Timeline工具分析了一下。

各種綠色！說明是painting（渲染）引起的性能問題，因此毫無疑問是動畫原因了。同時我還看了下Paint面板：

發(fā)現(xiàn)了一個十分大的層在繪制（綠色部分），發(fā)現(xiàn)是bg-border這個結(jié)點的問題。于是我查看了該結(jié)點的動畫：

會不會就是這個結(jié)點的border動畫引起的？那試試換一種寫法，我把border值固定，通過transform:scale來改變大小，實現(xiàn)了一樣的效果。

再看看timeline？

O.M.G！除了剛開始繪制的消耗外，其他時候已經(jīng)不會產(chǎn)生太多嚴(yán)重消耗，總體FPS維持在60以上（十分流暢），而且層的大小也自然降了下來。

結(jié)論： border動畫在低端機(jī)器可能會產(chǎn)生性能問題，看情況使用其他方式代替。

2. 前景放大動畫

在邀請函模板里有一個前景由小變大的動畫，但是在安卓機(jī)上產(chǎn)生了嚴(yán)重的渲染異常，如下圖：

在IOS機(jī)器上沒有重現(xiàn)，循例我查看了timeline。發(fā)現(xiàn)上面也沒有異樣，性能還是能保持流暢。那么問題出在哪里呢？

我查看了這區(qū)域的代碼，這里是一個影集間的相片切換效果，其中上一個效果結(jié)束會加上一個.animate-b的類，作用了這個類將會有一個漸隱的動畫；與此同時新的頁只要加上.animate類就開始播放。這是通過js控制兩個類來實現(xiàn)不同類型動畫的切換。

那么問題是否出在這里呢？于是我把漸隱動畫去掉，播放完的頁面直接隱藏掉，不讓動畫播放，然后新動畫調(diào)整到直接播放不漸現(xiàn)的效果。

最后發(fā)現(xiàn)，問題解決了！效果如圖：

結(jié)論： 背后的動畫可能會影響當(dāng)前動畫的播放，在安卓4.0系統(tǒng)都會產(chǎn)生渲染異常的問題，因此應(yīng)該把不在當(dāng)前播放的動畫停掉。

3. 安卓逐幀渲染bug

更多的性能問題都不會產(chǎn)生嚴(yán)重的表現(xiàn)，最多是一點卡頓。但是安卓4.0的渲染異常卻是常會出現(xiàn)，為此我再找一個例子。以下是我做萬圣節(jié)活動的時候發(fā)現(xiàn)的一個問題，具體表現(xiàn)直接上圖：

這是魅族比較好的一臺機(jī)器，但依然會產(chǎn)生逐幀渲染問題。

根據(jù)之前的例子，我第一時間會想到是否別的動畫在影響？我看到這個動畫作用錢有一個手一直搖一搖的動畫，而且發(fā)現(xiàn)搖完后那個動畫在背后是循環(huán)播放（infinite）的，一直沒有結(jié)束。

心想，只能是它了，于是我把它去掉：

結(jié)果如我所想，頁面終于流暢了：

總結(jié)： 在性能檢測的時候，有時候工具并不能幫到你，在找問題的時候也不要一味在當(dāng)前頁面找，很有可能是背后的一些無關(guān)代碼在做著別的消耗性行為，因此在找不到問題的時候不妨從當(dāng)前頁的上下游入手。

四、熟能生巧 —— 性能優(yōu)化的經(jīng)驗技巧

說了一些具體操作辦法，最后來說一下我在開發(fā)過程中積累的經(jīng)驗。

1. 以下屬性的更優(yōu)解決方案

左側(cè)屬性都很有可能會帶來性能問題。

2. 動畫坑點

• 兄弟元素間動畫互相影響

• 當(dāng)前播放的動畫會因為其他結(jié)點動畫還沒結(jié)束而收到影響，安卓機(jī)器上會呈現(xiàn)逐幀渲染的表現(xiàn)。

• 解決辦法：處可視區(qū)域播放的動畫外，將背后播放的動畫display:none或者animation-play-state:pause。

z-index設(shè)置不當(dāng)

• 兄弟元素在復(fù)合層中渲染，且z-index比主元素小，則主元素也會被加入到復(fù)合層渲染。有篇文章就是說這個問題。
• 解決辦法：給作用于動畫的兄弟元素設(shè)置合理z-index值。

3. 巧妙使用css動畫

這是一些用CSS3來解決一般JS效果的做法。

4. 是否都要GPU加速？

最后，討論一下這個問題。開啟GPU加速固然會讓頁面動畫更流暢，但是否表示所有元素都要開啟？肯定不是，會有以下幾個缺點：

• 盲目使用會讓無關(guān)元素都渲染成復(fù)合層。
• 復(fù)合層渲染成位圖消耗內(nèi)存，也會耗時。
• 移動端手機(jī)會因此電量消耗更快。

由此可見，如果使用GPU的元素很多，那么內(nèi)存的消耗可能就遠(yuǎn)遠(yuǎn)大于動畫的消耗，這就有點本末倒置了。因此，最好的辦法是處理好動畫層級，整合動畫層一并開啟GPU加速。

以上，感謝閱讀，歡迎留言討論。

【騰訊ISUX十二月份出品的干貨】

H5動效的八種制作方法：
《騰訊干貨！由淺入深科普最常用的八種HTML 5動效制作手法》

靠譜的布局方法是怎樣的？
《設(shè)計基礎(chǔ)功！騰訊高手教你靠譜的布局設(shè)定方法》

IOS 9人機(jī)界面指南技術(shù)篇：
《騰訊力作！IOS 9人機(jī)界面指南（3）：IOS 技術(shù) （上）》

原文地址：騰訊ISUX
作者：TQ

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量106萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com