性能优化工具知识梳理(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、小结

这篇文章，主要仍是着重于介绍如何使用这两个工具，所以，关于整个渲染的原理也只是一笔带过，以后会专门详细的分析。