Android app 效能最佳化之視圖最佳化

標籤：

Android app 效能最佳化之視圖最佳化
前言：

每當一款App開始快速擴充的時候，隨著業務功能的越來越複雜，功能模組的越來越多總會引起這樣那樣的效能問題。互動不流暢卡頓，ANR，手機發熱量大等等效能問題在Android開發中一直都是一個坑爹的存在。不是大家不想去最佳化，可能是等你發現開始要搞搞效能的時候，發現工程貌似好大了，能跑不崩就萬事大吉了，那麼多代碼要去看，去改。真心是一個讓人想想都糟心的事。也可能，關鍵點不好找，可能一個效能問題是別的你想都想不到的地方引起的，為了最佳化這麼一個點，可能花費很多時間。總之這麼一個複雜，浩大的工作，如果不想做，可以找一萬個理由。但是一款精品應用，效能最佳化會直接影響到你的app是一款什麼層次的app，會有多少使用者追捧你，可以讓你的app提升多少價值。好了，不扯犢子了，言歸正傳。

基本概念 ——不管是大神還是小白，都建議看看，加深印象。

本期說的是視圖最佳化，那有幾個關於渲染的基本概念就不得不提。

渲染效能

大多數使用者感知到的卡頓等效能問題的最主要根源都是因為渲染效能。當需求是一些複雜的互動或者是狂拽酷帥屌炸天的特效的時候，Android系統很有可能無法及時完成那些複雜的介面渲染操作。Android系統每隔16ms發出VSYNC訊號，觸發對UI進行渲染，如果每次渲染都成功，這樣就能夠達到流暢的畫面所需要的60fps，為了能夠實現60fps，這意味著程式的大多數操作都必須在16ms內完成。

但是如上所說，如果一個屌炸天的效果處理超過了16ms，系統在得到VSYNC訊號的時候就無法進行正常渲染，這樣就發生了丟幀現象。那麼使用者在32ms內看到的會是同一幀畫面。

一般來說UI執行動畫、或者一個視圖突然同時冒出來很多個需要渲染的組件、或者滑動ListView的時候容易引起卡頓，是因為這裡的操作相對複雜，容易發生丟幀的現象，從而感覺卡頓。有很多原因可以導致丟幀，也許是因為你的layout太過複雜，無法在16ms內完成渲染，有可能是因為你的UI上有層疊太多的繪製單元，還有可能是因為動畫執行的次數過多。這些都會導致CPU或者GPU負載過重。

過度重繪

Overdraw(過度繪製)描述的是螢幕上的某個像素在同一幀的時間內被繪製了多次。在多層次的UI結構裡面，如果不可見的UI也在做繪製的操作，這就會導致某些像素地區被繪製了多次。這就浪費大量的CPU以及GPU資源。

一般來說，這個問題應該是大多數app中都普遍存在的問題，可能是層疊組件的使用不合理導致過度重繪，也可能是Layout重複設定背景引起過度重繪。不過這個問題，我們可以很容易的藉助手機提供的工具快速的找出來。之後給出工具的使用。

VSYNC

理解App是如何進行渲染的，我們必須瞭解手機硬體是如何工作，那麼就必須理解什麼是VSYNC。

在講解VSYNC之前，我們需要瞭解兩個相關的概念：

• Refresh Rate：代表了螢幕在一秒內重新整理螢幕的次數，這取決於硬體的固定參數，例如60Hz。
• Frame Rate：代表了GPU在一秒內繪製操作的幀數，例如30fps，60fps。

GPU會擷取圖形資料進行渲染，然後硬體負責把渲染後的內容呈現到螢幕上，他們兩者不停的進行協作。

正常情況這樣固然是好，但是問題就是，你程式中的操作，極有可能導致幀率不同步，導致前幀跟後幀重疊，出現映像斷裂這樣的問題。

就像下面這個圖

VSYNC如果要深究還是蠻有意思的，有興趣的可自行GOOGLE。分享一個VSYNC相關文獻。

VSYNC 參考文獻

http://blog.csdn.net/michaelcao1980/article/details/43233765
工具篇   其實能夠調優的工具還是很多的。這裡就介紹幾個比較常用沒什麼門檻的工具的用法跟技巧。這幾個用好，就可以解決很多問題了。

Profile GPU Rendering （GPU呈現模式分析）這個工具在手機的開發人員選項裡。可以選擇不同的呈現方式
隨著介面的重新整理，介面上會滾動顯示線形圖來表示每幀畫面所需要渲染的時間

，圖越高表示花費的渲染時間越長。

中間有一根綠色的橫線，代表16ms，我們需要確保每一幀花費的總時間都低於這條
橫線，這樣才能夠避免出現卡頓的問題。整個分析圖分為三部分，藍色代表測量繪製Display List的時間，紅色代表OpenGL渲染Display List所需要的時間，黃色代表CPU等待GPU處理的時間。

舉個應用執行個體

使用者中心有個活動標籤的小動畫即一個熱門標籤的抖動。進入到頁面的時候，發現曲線跳動很厲害，而且每次跳動都超過16ms的基準線。就懷疑是否是這個動畫效果實現的不合理。

經過審查代碼發現如此簡單的一個動畫，採用的居然是逐幀動畫的方式實現。

<span style="font-family:Comic Sans MS;font-size:14px;"><?xml version="1.0" encoding="utf-8"?><animation-listxmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"><itemandroid:drawable="@drawable/hot_1"android:duration="200"/><itemandroid:drawable="@drawable/hot_2"android:duration="200"/><itemandroid:drawable="@drawable/hot_3"android:duration="200"/></animation-list></span>

逐幀動畫的實現方式是在指定時間顯示指定的幀圖片。逐幀動畫固然可以實現很多複雜的動畫效果，但是同時也帶來了效能問題，因為每次變幀都需要載入新的圖片資源。同時，因為幀是自己調的，如果每一幀設定圖片變化太大，整個動畫開起來就會很不連貫流暢。

對於這種抖動的簡單動畫，完全可以用補間動畫來做，不僅減少了資源的消耗，還可以讓整個動畫開起來更加流暢。

<pre name="code" class="java"><span style="font-family:Comic Sans MS;font-size:14px;">    private void setHotImgAnimation(View animationView){        ObjectAnimator shakeAnimator = new ObjectAnimator();        shakeAnimator.setInterpolator(new LinearInterpolator());        shakeAnimator.setProperty(View.ROTATION);        shakeAnimator.setFloatValues(0,45,0);        shakeAnimator.setDuration(600);        shakeAnimator.setRepeatCount(ValueAnimator.INFINITE);        shakeAnimator.setTarget(animationView);        shakeAnimator.start();    }</span>

運行代碼看修改後的效果：

可以明顯看出GPU呈現的分析圖，整個過程變得相對平滑，動畫過程也都降到了16ms以下。

Show GPU Overdraw （ 顯示GPU過度繪製）

這個工具也可以在開發人員選項中找到，開啟後，每當你進入一個應用，介面上就會把各個組件花花綠綠的標記出來。這些顏色分別達標什麼意思。藍色，淡綠，淡紅，深紅代表了4種不同程度的Overdraw情況，我們的目標就是盡量減少紅色Overdraw，看到更多的藍色地區。

Overdraw有時候是因為你的UI布局存在大量重疊的部分，還有的時候是因為非必須的重疊背景。例如某個Activity有一個背景，然后里面的Layout又有自己的背景，同時子View又分別有自己的背景。僅僅是通過移除非必須的背景圖片，這就能夠減少大量的紅色Overdraw地區，增加藍色地區的佔比。這一措施能夠顯著提升程式效能。

我們還是來舉例說明它的用法：

註：為了更好的呈現OverDraw所帶來的效能影響，這裡做了個小動作——不停的重新整理介面，以便的到充足的GPU效能分析圖。

可看出，左邊未修改的介面，OverDraw嚴重，滿螢幕飆紅，從GPU呈現圖上來看，GPU平局渲染時間都超過了16ms的基準。造成如此多的過度繪製的主要原因是重複的背景，紅色地區上層布局設定了背景，子布局又重複設定背景，導致了過度繪製。將不必要的背景設定出去以後，可以看到，紅色標記地區基本消失，從GPU呈現圖上來看，GPU平均渲染時間也降低到了16ms的基準線以下。

Android Monitors－Dump View Hierarchy這個工具在Android Monitors中。這個功能會把當前介面顯示的圖截下來，同時在右邊展示出當前介面的Display list的詳細資料顯示出來。通過這些資訊，你不僅可以分析視圖各個組件的狀態，值，大小等，還可以查看當前介面的布局，層級是否合理。這邊我就不再贅述了。


這期的分享就到這裡，後續還會更行更多的調優方面的工具 + 生產力跟技巧。也希望讀者們積極分享在開發過程中找到的比較好的調優方法，讓應用變的更加牛逼閃閃。

Android app 效能最佳化之視圖最佳化