性能優化工具知識梳理(3) 調試GPU過分繪製 & GPU呈現模式分析

時間 2019-11-21

標籤性能優化工具知識梳理調試 gpu 過分繪製呈現模式分析欄目系統性能简体版

原文原文鏈接

1、概述

今天，介紹兩個比較簡單的性能優化工具：html

調試GPU過分繪製
GPU呈現模式分析

其實這兩個工具所解決的問題並不相同，之因此把它們放在一塊兒，是由於它們都是Android手機自帶的分析工具，咱們只要在設置中對應的開關，就能夠實時得到分析的結果，下面，咱們就一塊兒來看一下如何使用它們。android

2、調試`GPU`過分繪製

2.1 應用場景

這個工具主要是用來檢查佈局中是否存在佈局層次過深的問題。首先，說明一下什麼叫過分繪製，過分繪製指的是屏幕中同一個像素點被繪製了屢次，舉個例子，咱們有一個紅色ViewB，它先被繪製了一次，也就是說它所在區域的每一個像素點都被繪製成了紅色，這時候有一個藍色ViewA，它蓋在ViewB的上面，因此咱們須要再把每一個像素點都繪製成藍色，這實際上是沒必要要的，出現這種狀況的時候，咱們就能夠經過這個工具來避免這種狀況的發生。性能優化

2.2 使用方式

使用方式很簡單，進入設置/輔助功能/開發者選項/，點擊調試GPU過分繪製選項，在彈出框中選擇第二項： bash

打開開關以後，能夠看到界面當中會出現各類顏色的矩形，這就對應着過分繪製的等級，顏色越深，代表過分繪製越嚴重，也就是說同一個像素點被重複繪製的次數過多，下面，咱們用一個簡單的例子，來看一下過分繪製的等級。首先看一下咱們的佈局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="browser.android.com.repoperformance.OverDrawActivity">
    <FrameLayout
        android:id="@+id/fl_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="100dp"
        android:background="@android:color/white">
        <FrameLayout
            android:id="@+id/fl_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="100dp"
            android:background="@android:color/white">
            <FrameLayout
                android:id="@+id/fl_3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="100dp"
                android:background="@android:color/white">
                <FrameLayout
                    android:id="@+id/fl_4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="100dp"
                    android:background="@android:color/white">
                    <FrameLayout
                        android:id="@+id/fl_5"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginBottom="100dp"
                        android:background="@android:color/white"/>
                </FrameLayout>
            </FrameLayout>
        </FrameLayout>
    </FrameLayout>
</RelativeLayout>
複製代碼

咱們佈局呈現爲逐級嵌套的層次，而且從fl_1開始都有一個白色的背景，那麼咱們看一下打開了調試GPU過分繪製開關以後的結果：異步

從上面的圖中能夠看到，fl_1的白色繪製是正常的，而fl_2和fl_1在因爲有100dp的重疊區域，所以這部區域被檢測成爲了藍色，而fl_3和fl_1/fl_2都有重疊，所以這部分區域被檢測成爲了綠色，fl_4和fl_5也是同理。經過上面的例子，能夠看到檢測的結果分爲四個等級，從低到高分別是：工具

藍色
綠色
淺紅
深紅

在開發當中，咱們在設計完界面以後，就應當經過這個工具來檢測一下，看可否在保證明現功能的前提下，避免出現過分繪製。佈局

3、`GPU`呈現模式分析

3.1 應用場景

當打開這個工具以後，會在屏幕的底端展示當前界面的繪製狀況，GPU呈現模式分析有如下幾點做用：性能

查看每一幀的渲染是否達到16ms的要求
分析一幀的渲染過程各階段的耗時
由於它是實時展示的，所以咱們能夠快速到問題產生的緣由

這個工具的使用方法和上面相似，一樣是進入開發者選項中，而後點擊GPU呈現模式分析，選擇「在屏幕上顯示爲條形圖」。優化

3.2 使用詳解

在Android 6.0以前和以後，GPU呈現的模式會有所不一樣，區別在於6.0以後，它將整個繪製的階段更加細分，讓開發者可以更方便的定位問題。動畫

基礎不管是在6.0以前仍是以後，這個工具的原理都是相同的。由於系統每隔16ms就會發出一次VSYNC信號，通知刷新UI，若是在16ms以內沒有完成繪製，那麼就必須等到下一次，這就會致使在很長一段時間內，看到的都是同一個畫面，也就是咱們所說的」卡頓」，界面的展現就是基於這個原理：
柱狀圖：柱狀圖的每一根的高度就表示渲染這一幀的耗時，當渲染的時間越長，則柱狀圖的高度越高。
基準線：咱們在界面上並不能看到柱狀圖對應的時間，而是經過在柱狀圖上方的基準線來判斷是否超過了標準的時間，基準線對應的就是16ms，若是柱狀圖的高度在基準線的下方，那麼就表示這一幀繪製的時間小於16ms。
Android 6.0以前在這個6.0版本以前，咱們將柱狀圖分爲如下幾個部分：
藍色Update 這部分表明View建立和更新DisplayList的時間，若是這部分很高，那麼表示咱們有不少自定義的View，或者在onDraw當中進行了過於複雜的操做。
紫色XFer 這部分在Android 4.0以後纔有，表示將資源傳遞到渲染線程所花的時間。
紅色Execute 這部分表明Android 2D渲染器向OpenGL發送命令來繪製和重繪的時間，這些命令就是來自於前面生成的Display List，若是這部分很高，那麼說明執行Display Lists中的命令花費了不少的時間。
黃色Process 這部分表明了CPU等待GPU完成操做所花的時間，若是這部分很高，那麼說明GPU當前很忙碌。

從上面的解釋當中，咱們能夠發現，雖說這個工具的名字叫作GPU呈現模式分析，可是咱們得到的全部信息都是來自CPU的，也就是說，咱們是從CPU的角度來間接地分析出當前渲染須要處理的信息。

整個渲染的過程是經過CPU向GPU發出命令，再由GPU去異步地渲染屏幕。在某些狀況下，因爲GPU有太多的工做要作，那麼就會致使CPU須要一直等待才能發出新的命令，而當這種狀況發生的時候，咱們就會看到橙色和紅色的部分特別長。

關於6.0以前各顏色的解釋來自於官方文檔：

http://android.xsoftlab.net/tools/performance/profile-gpu-rendering/index.html

Android 6.0以後在Android 6.0 以後，變爲了如今的八個部分：

其中，若是新增部分的圖形高度較高，那麼表示：
- Misc/Vsync Delay 咱們在主線程當中執行了過多的操做，致使跟不上VSYNC信號。
- InputHandling 咱們在處理用戶輸入的地方作了過多的操做。
- Animation 咱們在執行動畫的過程當中進行了耗時的操做。
- Measure & Layout：咱們的佈局過於複雜，以致於在測量和佈局的過程當中耗費了過多的時間。
- Sync & Upload：準備當前界面中有待繪製的圖片所耗費的時間過長。

6.0以前所保留下來的對應關係爲：

關於6.0以後各顏色的解釋來源於：

http://hukai.me/android-performance-patterns-season-5/

4、小結

這篇文章，主要仍是着重於介紹如何使用這兩個工具，所以，關於整個渲染的原理也只是一筆帶過，以後會專門詳細的分析。