動感影集是QQ空間新功能，可以將靜態的圖片輕松轉變為動態的視頻集，且載體是HTML5(簡稱H5)頁面，意味著可以隨時分享到空間或朋友圈給好友欣賞。移動端區別于PC年代的相冊視頻，由于設備性能限制，每一個動畫細節都需要認真優化，今天就來說說動感影集開發過程中的動畫性能檢測與優化的問題。

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

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

　　Timeline

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

　　使用方法：

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

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

　　它有三個模式：幀模式、事件模式和內存模式。

　　（1）幀模式

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

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

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

　　若動畫表現fps大于60，則超越了人眼能反映的刷新頻率;

　　如果fps小于30，則卡頓明顯;

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

　　同時通過點擊柱狀圖還可以看到CPU、內存的詳情，以及找到對應腳本和結點定位。

　　基本用法：

　　點擊錄制->開始頁面動畫->結束錄制

　　通過查看柱狀圖記錄出哪些柱比較高(性能差)

　　點擊柱圖定位事件記錄，結合詳情數據找出性能卡頓的原因

　　（2）事件模式和內存模式

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

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

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。