性能優化（二）UI界面優化——GPU過度繪制

一、什麼叫過度繪制

什麼叫過度繪制，網上看到一個栗子，很形象。過度繪制就像是家裡裝修刷牆面，假設本來最終想要得到的牆面效果顔色是藍色，結果在刷藍色之前，先刷了一層白色，再刷一層綠色，再來一層紅色，最後才刷上藍色。雖然最終得效果是一樣的，但造成了資源浪費。為什麼直接刷藍色？

上述栗子給了一個大概的過度繪制的概念。

過度繪制（Overdraw）描述的是螢幕上的某個像素在同一幀的時間内被繪制了多次。在多層次重疊的 UI 結構裡面，如果不可見的 UI 也在做繪制的操作，會導緻某些像素區域被繪制了多次，同時也會浪費大量的 CPU 以及 GPU 資源。

二、GPU過度繪制測試工具的使用

GPU過度繪制測試工具的打開方式：

打開GPU過度繪制測試工具後檢視正在開發的App：

                                                              優化前

看到App的界面顔色有很多種。其實分為五種顔色：白色、藍色、綠色、淺紅、紅色（如下圖，網絡導圖）

圖中的各種顔色代表其過度繪制的程度。一般App過度繪制優化的合格狀态是以白色、藍色 為主，綠色及以上顔色占比不超過界面占比的三分之一。實際開放中一些不能避免的過度繪制，可以事先和設計商量，盡量避免。

三、過度繪制優化的具體實作方案

首先是了解App的一個界面的具體分層：

由圖中看到，每個activity都對應一個視窗window，這個視窗是PhoneWindow的執行個體，PhoneWindow對應的布局是DecirView，一個界面的層級是DecirView-->ViewGroup-->View。

1、過度繪制，DecorView的background此時對我們來說是無用的，直接去掉。去掉window的背景可以在onCreate()中setContentView()之後調用

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
        setContentView(R.layout.activity_main);
       
        //性能優化：過度繪制，DecorView的background此時對我們來說是無用的，
        //去掉window的背景可以在onCreate()中setContentView()之後調用
        getWindow().setBackgroundDrawable(null);

        ... ...

    }
}
           

2、從DecirView-->ViewGroup-->View，確定每個Activity界面隻有一套全局的背景繪制 。在前期與設計交涉的時候，對于底圖確定一種顔色風格。

                                                                 優化後

3、對于多個控件重疊的部分使用clipRect，可以通過canvas.clipRect()來 幫助系統識别那些可見的區域。這個API可以很好的幫助那些有多組重疊 元件的自定義View來控制顯示的區域。