Android UI性能優化實戰識別繪製中的性能問題

原文地址：

http://blog.csdn.net/lmj623565791/article/details/45556391；
本文出自:【張鴻洋的博客】

1、概述

2015年初google發佈了Android性能優化典範，發了16個小視頻供大家欣賞，當時我也將其下載，通過微信公衆號給大家推送了百度雲的下載地址（地址在文末，ps:歡迎大家訂閱公衆號），那麼近期google又在udacity上開了系列類的相關課程。有了上述的參考，那麼本性能優化實戰教程就有了堅實的基礎，本系列將結合實例爲大家展示如何去識別、診斷、解決Android應用開發中存在的性能問題。那麼首先帶來的就是大家最關注的渲染的性能優化（~~渲染就是把東西繪製到屏幕上）。

ps:本博客所有案例可能並不會完全按照Google給出的例子，因爲範例代碼比較多且不好在博客中展示，所以基本代碼都會經過調整，但表達的意思不會變。

2、 Android渲染機制

大家自己編寫App的時候，有時會感覺界面卡頓，尤其是自定義View的時候，大多數是因爲佈局的層次過多，存在不必要的繪製，或者onDraw等方法中過於耗時。那麼究竟需要多快，才能給用戶一個流暢的體驗呢？那麼就需要簡單瞭解下Android的渲染機制，一圖勝千言：

Android系統每隔16ms發出VSYNC信號，觸發對UI進行渲染，那麼整個過程如果保證在16ms以內就能達到一個流暢的畫面。那麼如果操作超過了16ms就會發生下面的情況：

如果系統發生的VSYNC信號，而此時無法進行渲染，還在做別的操作，那麼就會導致丟幀的現象，（大家在察覺到APP卡頓的時候，可以看看logcat控制太，會有drop frames類似的警告）。這樣的話，繪製就會在下一個16ms的時候才進行繪製，即使只丟一幀，用戶也會發現卡頓的~~（ps:上面標識不應該是32ms麼，咋是34ms，難道我錯過了什麼）。

好了，很多朋友會不會奇怪爲什麼是16ms，16ms意味着着1000/60hz，相當於60fps，那麼只要解釋爲什麼是60fps，好在這個問題，網上有解答：

這是因爲人眼與大腦之間的協作無法感知超過60fps的畫面更新。12fps大概類似手動快速翻動書籍的幀率，這明顯是可以感知到不夠順滑的。24fps使得人眼感知的是連續線性的運動，這其實是歸功於運動模糊的
效果。24fps是電影膠圈通常使用的幀率，因爲這個幀率已經足夠支撐大部分電影畫面需要表達的內容，同時能夠最大的減少費用支出。但是低於30fps是
無法順暢表現絢麗的畫面內容的，此時就需要用到60fps來達到想要的效果，當然超過60fps是沒有必要的（據說Dart能夠帶來120fps的體驗）。本引用來源：Google 發佈 Android 性能優化典範 - 開源中國社區

好了，有了對Android渲染機制基本的認識以後，那麼我們的卡頓的原因就在於沒有辦法在16ms內完成該完成的操作，而主要因素是在於沒有必要的layouts、invalidations、Overdraw。渲染的過程是由CPU與GPU協作完成，下面一張圖很好的展示出了CPU和GPU的工作，以及潛在的問題，檢測的工具和解決方案。

如果你對上圖感到不理解，沒關係，你只要知道問題：

通過Hierarchy Viewer去檢測渲染效率，去除不必要的嵌套
通過Show GPU Overdraw去檢測Overdraw，最終可以通過移除不必要的背景以及使用canvas.clipRect解決大多數問題。

如果你還覺得不能理解，沒關係，文本畢竟是枯燥的，那麼結合實例來展示優化的過程。

3、Overdraw的檢測

對於性能優化，那麼首先肯定是去發現問題，那麼對麼overdraw這個問題，還是比較容易發現的。
按照以下步驟打開Show GPU Overrdraw的選項：

設置 -> 開發者選項 -> 調試GPU過度繪製 -> 顯示GPU過度繪製

好了，打開以後呢，你會發現屏幕上有各種顏色，此時你可以切換到需要檢測的程序，對於各個色塊，對比一張Overdraw的參考圖：

那麼如果你發現你的app上深紅色的色塊比較多，那麼可能就要注意了，接下來就開始說如果遇到overdraw的情況比較嚴重我們該則麼處理。

4、Overdraw 的處理方案一：移除不必要的background

下面看一個簡單的展示ListView的例子：

activity_main

<code class="language-xml hljs  has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
              <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
              <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
              <span class="hljs-attribute">android:paddingLeft</span>=<span class="hljs-value">"@dimen/activity_horizontal_margin"</span>
              <span class="hljs-attribute">android:paddingRight</span>=<span class="hljs-value">"@dimen/activity_horizontal_margin"</span>
              <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android:color/white"</span>
              <span class="hljs-attribute">android:paddingTop</span>=<span class="hljs-value">"@dimen/activity_vertical_margin"</span>
              <span class="hljs-attribute">android:paddingBottom</span>=<span class="hljs-value">"@dimen/activity_vertical_margin"</span>
              <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>
    ></span>

    <span class="hljs-tag"><<span class="hljs-title">TextView
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"@dimen/narrow_space"</span>
        <span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"@dimen/large_text_size"</span>
        <span class="hljs-attribute">android:layout_marginBottom</span>=<span class="hljs-value">"@dimen/wide_space"</span>
        <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/header_text"</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">ListView
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/id_listview_chats"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android:color/white"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:divider</span>=<span class="hljs-value">"@android:color/transparent"</span>
        <span class="hljs-attribute">android:dividerHeight</span>=<span class="hljs-value">"@dimen/divider_height"</span>/></span>
<span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul>

item的佈局文件

<code class="language-xml hljs  has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>

<span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span>
    <span class="hljs-attribute">android:paddingBottom</span>=<span class="hljs-value">"@dimen/chat_padding_bottom"</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ImageView
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/id_chat_icon"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"@dimen/avatar_dimen"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"@dimen/avatar_dimen"</span>
        <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@drawable/joanna"</span>
        <span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"@dimen/avatar_layout_margin"</span> /></span>

    <span class="hljs-tag"><<span class="hljs-title">LinearLayout
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android:color/darker_gray"</span>
        <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">RelativeLayout
</span>            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android:color/white"</span>
            <span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"#78A"</span>
            <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span>></span>

            <span class="hljs-tag"><<span class="hljs-title">TextView</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_alignParentLeft</span>=<span class="hljs-value">"true"</span>
                <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"@dimen/narrow_space"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/hello_world"</span>
                <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"bottom"</span>
                <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/id_chat_name"</span> /></span>

            <span class="hljs-tag"><<span class="hljs-title">TextView</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_alignParentRight</span>=<span class="hljs-value">"true"</span>
                <span class="hljs-attribute">android:textStyle</span>=<span class="hljs-value">"italic"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/hello_world"</span>
                <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"@dimen/narrow_space"</span>
                <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/id_chat_date"</span> /></span>
        <span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">TextView</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"@dimen/narrow_space"</span>
            <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android:color/white"</span>
            <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/hello_world"</span>
            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/id_chat_msg"</span> /></span>
    <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
<span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li></ul>

Activity的代碼

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">package</span> com.zhy.performance_01_render;

<span class="hljs-keyword">import</span> android.os.Bundle;
<span class="hljs-keyword">import</span> android.os.PersistableBundle;
<span class="hljs-keyword">import</span> android.support.annotation.Nullable;
<span class="hljs-keyword">import</span> android.support.v7.app.AppCompatActivity;
<span class="hljs-keyword">import</span> android.view.LayoutInflater;
<span class="hljs-keyword">import</span> android.view.View;
<span class="hljs-keyword">import</span> android.view.ViewGroup;
<span class="hljs-keyword">import</span> android.widget.ArrayAdapter;
<span class="hljs-keyword">import</span> android.widget.ImageView;
<span class="hljs-keyword">import</span> android.widget.ListView;
<span class="hljs-keyword">import</span> android.widget.TextView;

<span class="hljs-javadoc">/**
 * Created by zhy on 15/4/29.
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">OverDrawActivity01</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span>
{</span>
    <span class="hljs-keyword">private</span> ListView mListView;
    <span class="hljs-keyword">private</span> LayoutInflater mInflater ;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(@Nullable Bundle savedInstanceState)
    {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);

        setContentView(R.layout.activity_overdraw_01);

        mInflater = LayoutInflater.from(<span class="hljs-keyword">this</span>);
        mListView = (ListView) findViewById(R.id.id_listview_chats);

        mListView.setAdapter(<span class="hljs-keyword">new</span> ArrayAdapter<Droid>(<span class="hljs-keyword">this</span>, -<span class="hljs-number">1</span>, Droid.generateDatas())
        {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> View <span class="hljs-title">getView</span>(<span class="hljs-keyword">int</span> position, View convertView, ViewGroup parent)
            {

                ViewHolder holder = <span class="hljs-keyword">null</span> ;
                <span class="hljs-keyword">if</span>(convertView == <span class="hljs-keyword">null</span>)
                {
                    convertView = mInflater.inflate(R.layout.chat_item,parent,<span class="hljs-keyword">false</span>);
                    holder = <span class="hljs-keyword">new</span> ViewHolder();
                    holder.icon = (ImageView) convertView.findViewById(R.id.id_chat_icon);
                    holder.name = (TextView) convertView.findViewById(R.id.id_chat_name);
                    holder.date = (TextView) convertView.findViewById(R.id.id_chat_date);
                    holder.msg = (TextView) convertView.findViewById(R.id.id_chat_msg);
                    convertView.setTag(holder);
                }<span class="hljs-keyword">else</span>
                {
                    holder = (ViewHolder) convertView.getTag();
                }

                Droid droid = getItem(position);
                holder.icon.setBackgroundColor(<span class="hljs-number">0x44ff0000</span>);
                holder.icon.setImageResource(droid.imageId);
                holder.date.setText(droid.date);
                holder.msg.setText(droid.msg);
                holder.name.setText(droid.name);

                <span class="hljs-keyword">return</span> convertView;
            }

            class ViewHolder
            {
                ImageView icon;
                TextView name;
                TextView date;
                TextView msg;
            }

        });
    }


}
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li></ul>

實體的代碼

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">package</span> com.zhy.performance_01_render;

<span class="hljs-keyword">import</span> java.util.ArrayList;
<span class="hljs-keyword">import</span> java.util.List;

<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Droid</span>
{</span>
    <span class="hljs-keyword">public</span> String name;
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> imageId;
    <span class="hljs-keyword">public</span> String date;
    <span class="hljs-keyword">public</span> String msg;


    <span class="hljs-keyword">public</span> <span class="hljs-title">Droid</span>(String msg, String date, <span class="hljs-keyword">int</span> imageId, String name)
    {
        <span class="hljs-keyword">this</span>.msg = msg;
        <span class="hljs-keyword">this</span>.date = date;
        <span class="hljs-keyword">this</span>.imageId = imageId;
        <span class="hljs-keyword">this</span>.name = name;
    }

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> List<Droid> <span class="hljs-title">generateDatas</span>()
    {
        List<Droid> datas = <span class="hljs-keyword">new</span> ArrayList<Droid>();

        datas.add(<span class="hljs-keyword">new</span> Droid(<span class="hljs-string">"Lorem ipsum dolor sit amet, orci nullam cra"</span>, <span class="hljs-string">"3分鐘前"</span>, -<span class="hljs-number">1</span>, <span class="hljs-string">"alex"</span>));
        datas.add(<span class="hljs-keyword">new</span> Droid(<span class="hljs-string">"Omnis aptent magnis suspendisse ipsum, semper egestas"</span>, <span class="hljs-string">"12分鐘前"</span>, R.drawable.joanna, <span class="hljs-string">"john"</span>));
        datas.add(<span class="hljs-keyword">new</span> Droid(<span class="hljs-string">"eu nibh, rhoncus wisi posuere lacus, ad erat egestas"</span>, <span class="hljs-string">"17分鐘前"</span>, -<span class="hljs-number">1</span>, <span class="hljs-string">"7heaven"</span>));
        datas.add(<span class="hljs-keyword">new</span> Droid(<span class="hljs-string">"eu nibh, rhoncus wisi posuere lacus, ad erat egestas"</span>, <span class="hljs-string">"33分鐘前"</span>, R.drawable.shailen, <span class="hljs-string">"Lseven"</span>));

        <span class="hljs-keyword">return</span> datas;
    }


}
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul>

現在的效果是：

注意，我們的需求是整體是Activity是個白色的背景。

開啓Show GPU Overdraw以後：

對比上面的參照圖，可以發現一個簡單的ListView展示Item，竟然很多地方被過度繪製了4X 。那麼，其實主要原因是由於該佈局文件中存在很多不必要的背景，仔細看上述的佈局文件，那麼開始移除吧。

不必要的Background 1

我們主佈局的文件已經是background爲white了，那麼可以移除ListView的白色背景
不必要的Background 2

Item佈局中的LinearLayout的android:background="@android:color/darker_gray"
不必要的Background 3

Item佈局中的RelativeLayout的android:background="@android:color/white"
不必要的Background 4

Item佈局中id爲id_msg的TextView的android:background="@android:color/white"

這四個不必要的背景也比較好找，那麼移除後的效果是：

對比之前的是不是好多了~~~接下來還存在一些不必要的背景，你還能找到嗎？

不必要的Background 5

這個背景比較難發現，主要需要看Adapter的getView的代碼，上述代碼你會發現，首先爲每個icon設置了背景色（主要是當沒有icon圖的時候去顯示），然後又設置了一個頭像。那麼就造成了overdraw，有頭像的完全沒必要去繪製背景，所有修改代碼：

<code class="language-java hljs  has-numbering">Droid droid = getItem(position);
                <span class="hljs-keyword">if</span>(droid.imageId ==-<span class="hljs-number">1</span>)
                {
                    holder.icon.setBackgroundColor(<span class="hljs-number">0x4400ff00</span>);
                    holder.icon.setImageResource(android.R.color.transparent);
                }<span class="hljs-keyword">else</span>
                {
                    holder.icon.setImageResource(droid.imageId);
                    holder.icon.setBackgroundResource(android.R.color.transparent);
                }
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>

ok，還有最後一個，這個也是非常容易被忽略的。

不必要的Background 6

記得我們之前說，我們的這個Activity要求背景色是白色，我們的確在layout中去設置了背景色白色，那麼這裏注意下，我們的Activity的佈局最終會添加在DecorView中，這個View會中的背景是不是就沒有必要了，所以我們希望調用mDecor.setWindowBackground(drawable);，那麼可以在Activity調用getWindow().setBackgroundDrawable(null);。

<code class="language-java hljs  has-numbering">setContentView(R.layout.activity_overdraw_01);
        getWindow().setBackgroundDrawable(<span class="hljs-keyword">null</span>);</code><ul class="pre-numbering"><li>1</li><li>2</li></ul>

ok，一個簡單的listview顯示item，我們一共找出了6個不必要的背景，現在再看最後的Show GPU Overdraw 與最初的比較。

ok，對比參照圖，基本已經達到了最優的狀態。

5、Overdraw 的處理方案二：clipRect的妙用

我們在自定義View的時候，經常會由於疏忽造成很多不必要的繪製，比如大家看下面這樣的圖：

多張卡片疊加，那麼如果你是一張一張卡片從左到右的繪製，效果肯定沒問題，但是疊加的區域肯定是過度繪製了。
並且material design對於界面設計的新的風格更容易造成上述的問題。那麼有什麼好的方法去改善呢？
答案是有的，android的Canvas對象給我們提供了很便利的方法clipRect就可以很好的去解決這類問題。

下面通過一個實例來展示，那麼首先看一個效果圖：

左邊顯示的時效果圖，右邊顯示的是開啓Show Override GPU之後的效果，可以看到，卡片疊加處明顯的過度渲染了。 (ps:我對這個View添加了一個背景色~~仔細看下面的代碼） * View代碼

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">package</span> com.zhy.performance_01_render;

<span class="hljs-keyword">import</span> android.content.Context;
<span class="hljs-keyword">import</span> android.graphics.Bitmap;
<span class="hljs-keyword">import</span> android.graphics.BitmapFactory;
<span class="hljs-keyword">import</span> android.graphics.Canvas;
<span class="hljs-keyword">import</span> android.view.View;

<span class="hljs-javadoc">/**
 * Created by zhy on 15/4/30.
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CardView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span>
{</span>
    <span class="hljs-keyword">private</span> Bitmap[] mCards = <span class="hljs-keyword">new</span> Bitmap[<span class="hljs-number">3</span>];

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span>[] mImgId = <span class="hljs-keyword">new</span> <span class="hljs-keyword">int</span>[]{R.drawable.alex, R.drawable.chris, R.drawable.claire};

    <span class="hljs-keyword">public</span> <span class="hljs-title">CardView</span>(Context context)
    {
        <span class="hljs-keyword">super</span>(context);

        Bitmap bm = <span class="hljs-keyword">null</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>; i < mCards.length; i++)
        {
            bm = BitmapFactory.decodeResource(getResources(), mImgId[i]);
            mCards[i] = Bitmap.createScaledBitmap(bm, <span class="hljs-number">400</span>, <span class="hljs-number">600</span>, <span class="hljs-keyword">false</span>);
        }

        setBackgroundColor(<span class="hljs-number">0xff00ff00</span>);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDraw</span>(Canvas canvas)
    {

        <span class="hljs-keyword">super</span>.onDraw(canvas);

        canvas.save();
        canvas.translate(<span class="hljs-number">20</span>, <span class="hljs-number">120</span>);
        <span class="hljs-keyword">for</span> (Bitmap bitmap : mCards)
        {
            canvas.translate(<span class="hljs-number">120</span>, <span class="hljs-number">0</span>);
            canvas.drawBitmap(bitmap, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">null</span>);
        }
        canvas.restore();

    }
}

</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li></ul>

Activity代碼

<code class="language-java hljs  has-numbering"><span class="hljs-javadoc">/**
 * Created by zhy on 15/4/30.
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">OverDrawActivity02</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span>
{</span>

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(@Nullable Bundle savedInstanceState)
    {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);

        setContentView(<span class="hljs-keyword">new</span> CardView(<span class="hljs-keyword">this</span>));
    }
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul>

那麼大家可以考慮下如何去優化，其實很明顯哈，我們上面已經說了使用cliprect方法，那麼我們目標直指
自定義View的onDraw方法。
修改後的代碼：

<code class="language-java hljs  has-numbering">
 <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDraw</span>(Canvas canvas)
    {

        <span class="hljs-keyword">super</span>.onDraw(canvas);

        canvas.save();
        canvas.translate(<span class="hljs-number">20</span>, <span class="hljs-number">120</span>);
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>; i < mCards.length; i++)
        {
            canvas.translate(<span class="hljs-number">120</span>, <span class="hljs-number">0</span>);
            canvas.save();
            <span class="hljs-keyword">if</span> (i < mCards.length - <span class="hljs-number">1</span>)
            {
                canvas.clipRect(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">120</span>, mCards[i].getHeight());
            }
            canvas.drawBitmap(mCards[i], <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">null</span>);
            canvas.restore();
        }
        canvas.restore();

    }</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul>

分析得出，除了最後一張需要完整的繪製，其他的都只需要繪製部分；所以我們在循環的時候，給i到n-1都添加了clipRect的代碼。

最後的效果圖：

可以看到，所有卡片變爲了淡紫色，對比參照圖，都是1X過度繪製，那麼是因爲我的View添加了一個
ff00ff00的背景，可以說明已經是最優了。

如果你按照上面的修改，會發現最終效果圖不是淡紫色，而是青色（2X），那是爲什麼呢？因爲你還忽略了
一個優化的地方，本View已經有了不透明的背景，完全可以移除Window的背景了，即在Activity中，添加getWindow().setBackgroundDrawable(null);代碼。

好了，說完了Overdraw的檢測與處理，那麼還剩下一個layouts、invalidations過慢的問題，那麼這類問題主要可能是你的XML層級過多導致的，當然也有很好的工具可以用來檢測，那麼就是Hierarchy Viewer。

6、減少不必要的層次：巧用Hierarchy Viewer

1、Hierarchy Viewer工具簡介

Android SDK中包含這個工具，不過大家肯定也不陌生了~~~

那麼就簡單說一下它在哪，如何使用，以及真機無法使用該工具該怎麼解決。

Hierarchy Viewer在哪？

本博客使用IDE爲Android Studio，那麼只需要按照下圖步驟即可找到：

其他IDE的兄弟，找到這個肯定沒問題，不過還是建議慢慢的轉向AS。

如何使用？

一圖勝千言：

關注下，所有框住的區域~~

無法連接真機調試怎麼辦？

如果你不存在這樣的問題，直接跳過本節。

Android的官方文檔中，有這麼一句話：

出於安全考慮，Hierarchy Viewer只能連接Android開發版手機或是模擬器

看來的確是存在這樣的問題了，並且網上也有一些解決方案，修改源碼神馬的，有興趣去試試。
這裏推薦一種解決方案：romainguy在github上有個項目ViewServer，可以下載下來導入到IDE中，裏面有個ViewServer的類，類註釋上也標註了用法，在你希望調試的Activity以下該三個方法中，添加幾行代碼：

<code class="language-java hljs  has-numbering"> * <pre>
 * <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> {</span>
 *     <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
 *         <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
 *         <span class="hljs-comment">// Set content view, etc.</span>
 *         ViewServer.get(<span class="hljs-keyword">this</span>).addWindow(<span class="hljs-keyword">this</span>);
 *     }
 *       
 *     <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDestroy</span>() {
 *         <span class="hljs-keyword">super</span>.onDestroy();
 *         ViewServer.get(<span class="hljs-keyword">this</span>).removeWindow(<span class="hljs-keyword">this</span>);
 *     }
 *   
 *     <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onResume</span>() {
 *         <span class="hljs-keyword">super</span>.onResume();
 *         ViewServer.get(<span class="hljs-keyword">this</span>).setFocusedWindow(<span class="hljs-keyword">this</span>);
 *     }
 * }
 * </pre></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul>

記得先添加依賴，別問我怎麼找不到ViewServer這個類，添加以上3行以後，手機運行至該Activity，重啓下Android Device Moniter，然後就ok了，我就是這種方法調試的，哈~~

2、優化案例

好了，上面介紹完成了如何使用Hierarchy Viewer，下面使用一個案例來說明問題。
主要就是個佈局文件：

佈局文件

<code class="language-xml hljs  has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>

<span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>></span>

    <span class="hljs-comment"><!-- Version 1. Uses nested LinearLayouts --></span>
    <span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
        <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:layout_marginTop</span>=<span class="hljs-value">"@dimen/activity_vertical_margin"</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">ImageView
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/chat_author_avatar1"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"@dimen/avatar_dimen"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"@dimen/avatar_dimen"</span>
            <span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"@dimen/avatar_layout_margin"</span>
            <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@drawable/joanna"</span>/></span>

        <span class="hljs-tag"><<span class="hljs-title">LinearLayout
</span>            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>></span>

            <span class="hljs-tag"><<span class="hljs-title">TextView
</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/line1_text"</span> /></span>

            <span class="hljs-tag"><<span class="hljs-title">TextView
</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/line2_text"</span>/></span>
        <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>


    <span class="hljs-comment"><!-- Version 2: uses a single RelativeLayout --></span>
    <span class="hljs-tag"><<span class="hljs-title">RelativeLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
        <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:layout_marginTop</span>=<span class="hljs-value">"@dimen/activity_vertical_margin"</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">ImageView
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/chat_author_avatar2"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"@dimen/avatar_dimen"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"@dimen/avatar_dimen"</span>
            <span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"@dimen/avatar_layout_margin"</span>
            <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@drawable/joanna"</span>/></span>


        <span class="hljs-tag"><<span class="hljs-title">TextView
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/rl_line1"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:layout_toRightOf</span>=<span class="hljs-value">"@id/chat_author_avatar2"</span>
            <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/line1_text"</span> /></span>

        <span class="hljs-tag"><<span class="hljs-title">TextView
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/rl_line2"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:layout_below</span>=<span class="hljs-value">"@id/rl_line1"</span>
            <span class="hljs-attribute">android:layout_toRightOf</span>=<span class="hljs-value">"@id/chat_author_avatar2"</span>
            <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/line2_text"</span> /></span>
    <span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span>
<span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li></ul>

Activity

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">package</span> com.zhy.performance_01_render;

<span class="hljs-keyword">import</span> android.os.Bundle;
<span class="hljs-keyword">import</span> android.support.v7.app.ActionBarActivity;

<span class="hljs-keyword">import</span> com.android.debug.hv.ViewServer;


<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CompareLayoutActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ActionBarActivity</span>
{</span>

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState)
    {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_compare_layouts);

        ViewServer.get(<span class="hljs-keyword">this</span>).addWindow(<span class="hljs-keyword">this</span>);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onResume</span>()
    {
        <span class="hljs-keyword">super</span>.onResume();
        ViewServer.get(<span class="hljs-keyword">this</span>).setFocusedWindow(<span class="hljs-keyword">this</span>);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDestroy</span>()
    {
        <span class="hljs-keyword">super</span>.onDestroy();
        ViewServer.get(<span class="hljs-keyword">this</span>).removeWindow(<span class="hljs-keyword">this</span>);
    }
}
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li></ul>

可以看到我們的Activity裏面添加了ViewServer相關的幾行代碼。
然後手機打開此Activity，打開Android Device Moniter，切換到Hierarchy Viewer視圖，可以看到：

點擊LinearLayout，然後點擊Profile Node，你會發現所有的子View上面都有了3個圈圈，
（取色範圍爲紅、黃、綠色），這三個圈圈分別代表measure 、layout、draw的速度，並且你也可以看到實際的運行的速度，如果你發現某個View上的圈是紅色，那麼說明這個View相對其他的View，該操作運行最慢，注意只是相對別的View，並不是說就一定很慢。

紅色的指示能給你一個判斷的依據，具體慢不慢還是需要你自己去判斷的。

好了，上面的佈局文件展示了ListView的Item的編寫的兩個版本，一個是Linearlayout嵌套的，一個是RelativeLayout的。上圖也可以看出Linearlayout的版本相對RelativeLayout的版本要慢很多（請多次點擊Profile Node取樣）。即可說明RelativeLayout的版本更優於RelativeLayout的寫法，並且Hierarchy Viewer可以幫助我們發現類似的問題。

恩，對了，第一個例子裏面的ListView的Item的寫法就是Liearlayout嵌套的，大家有興趣可以修改爲RelativeLayout的寫法的~~~

到此我們就介紹完成了如何去對Android渲染進行優化，如果你的app有卡頓的情況，可以通過使用上述的工具首先去檢測收集數據，然後按照上面提供的方法進行優化~~have a nice day ~~

羣號：264950424，歡迎入羣

下載地址

微信公衆號：hongyangAndroid
（歡迎關注，第一時間推送博文信息）

Android UI性能優化實戰識別繪製中的性能問題

1、概述

2、 Android渲染機制

3、Overdraw的檢測

4、Overdraw 的處理方案一：移除不必要的background

5、Overdraw 的處理方案二：clipRect的妙用

6、減少不必要的層次：巧用Hierarchy Viewer

1、Hierarchy Viewer工具簡介

2、優化案例

參考鏈接

listview得到滑動距離像素的方法

Android ListView工作原理完全解析，帶你從源碼的角度徹底理解

深度理解Android InstantRun原理以及源碼分析

Android LayoutInflater深度解析給你帶來全新的認識

Android -- Looper.prepare()和Looper.loop() —深入版

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Android UI性能優化實戰 識別繪製中的性能問題

1、概述

2、 Android渲染機制

3、Overdraw的檢測

4、Overdraw 的處理方案一：移除不必要的background

5、Overdraw 的處理方案二：clipRect的妙用

6、減少不必要的層次：巧用Hierarchy Viewer

1、Hierarchy Viewer工具簡介

2、優化案例

參考鏈接

Android UI性能優化實戰識別繪製中的性能問題