Android布局最佳化之過度繪製

標籤：

如果一個布局十分複雜，那麼就需要來排查是否出現了過度繪製，如果出現了，那麼很可能會造成重新整理率下降，造成卡頓的現象。那麼什麼是過度繪製呢？過度繪製就是在同一個地區中疊加了多個控制項。這就像小時候我們畫畫，白紙就是沒有繪製的畫板，如果我們畫了一個房子，塗上了紅色，又在上面畫了窗戶，圖上了棕色，窗戶上又畫了藍色的玻璃，這重重複的疊加就是過度繪製，在白紙上的結果是，過度繪製的地區紙會被水筆浸的比較濕，在手機上就會出現顯示較慢。如果說這是感性的認識，那麼我就引用下面一段話來理性的解釋一下：

1. 布局檔案是一個xml檔案，inflate布局檔案其實就是解析xml，根據標籤資訊建立相應的布局對象並做關聯。xml中的標籤和屬性設定越多，節點樹的深度越深，在解析時要執行的判斷邏輯、函數的嵌套和遞迴就越多，所以時間消耗越多；

2. inflate操作只是布局影響的第一個環節，一個介面要顯示出來，在requestLayout後還要執行一系列的measure、layout、draw的操作，每一步的執行時間都會受到布局本身的影響。而介面的最終顯示是所有這些操作完成後才實現的，所以如果布局品質差，會增加每一步操作的時間成本，最終顯示時間就會比較長。

現在，我們就來說說如何查看是否有過度繪製，和如何避免它吧。

 

一、查看是否存在過度繪製

1. GPU過渡繪製:對於過度繪製的測試主要通過人工進行測試，也是發現應用過渡繪製的首選途徑 .通過開啟開發人員選項中的 顯示GPU過度繪製(魅族手機:設定—協助工具功能–開發人員工具–硬體加速渲染—調試GPU過渡繪製— 顯示過渡繪製地區.）來進行測試（PS：只有android4.2及以上的版本才具備此功能)

1. 顏色標識: 從好到差:藍-綠-淡紅-紅

1. 藍色1x過度繪製
2. 綠色2x過度繪製
3. 淡紅色3x過度繪製
4. 紅色超過4x過度繪製

2. 驗收標準:

1. 控制過度繪製為2x
2. 不允許存在4x過度繪製
3. 不允許存在面積超過螢幕1/4地區的3x過度繪製（淡紅色地區）

我們就可以看到，文字部分出現了綠色（因為和底部的藍色疊加了，所以變成了黃綠色），在頂部開關部分出現了紅色，也就是四層的過度繪製，這是需要避免的。但由於在螢幕上占的位置很小，所以可以酌情考慮。

 

上面面是小米商店的截屏，可以看見其中有大量的過度繪製地區，總結下來過度繪製較常見於文字地區。

 

二、避免過度繪製的方法

下面這段文字來自他人部落格：

Gracker
出處：androidperformance.com
本文著作權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。
打賞一下： 微博打賞

1. 盡量多使用RelativeLayout和LinearLayout, 不要使用絕對布局AbsoluteLayout，

1. 在布局層次一樣的情況下， 建議使用LinearLayout代替RelativeLayout, 因為LinearLayout效能要稍高一點.
2. 在完成相對較複雜的布局時,建議使用RelativeLayout,RelativeLayout可以簡單實現LinearLayout嵌套才能實現的布局.

2. 將可複用的組件抽取出來並通過include標籤使用；
3. 使用ViewStub標籤來載入一些不常用的布局；
4. 動態地inflation view效能要比SetVisiblity效能要好.當然用VIewStub是最好的選擇.
5. 使用merge標籤減少布局的嵌套層次
6. 去掉多餘的背景顏色

7. 對於有多層背景顏色的Layout來說,留最上面一層的顏色即可,其他底層的顏色都可以去掉
8. 對於使用Selector當背景的Layout(比如ListView的Item,會使用Selector來標記點擊,選擇等不同的狀態),可以將normal狀態的color設定為”@android:color/transparent”,來解決對應的問題

9. 內嵌使用包含layout_weight屬性的LinearLayout會在繪製時花費昂貴的系統資源，因為每一個子組件都需要被測量兩次。在使用ListView與GridView的時候，這個問題顯的尤其重要，因為子組件會重複被建立.所以要盡量避免使用Layout_weight
10. 使得Layout寬而淺，而不是窄而深（在Hierarchy Viewer的Tree視圖裡面體現）

 

上面提到的多個工具和技巧我都在之前的文章有所講解了，在實際開發過程中需要多多思考，根據情況來使用不同的技巧。

 

參考自：

http://www.androidperformance.com/android-performance-optimization-overdraw-1.html

http://www.open-open.com/lib/view/open1421656495031.html

Android布局最佳化之過度繪製