性能优化工具知识梳理(3) - 调试GPU过度绘制 & GPU呈现模式分析

性能优化工具知识梳理(1) - TraceView
性能优化工具知识梳理(2) - Systrace
性能优化工具知识梳理(3) - 调试GPU过度绘制 & GPU呈现模式分析
性能优化工具知识梳理(4) - Hierarchy Viewer
性能优化工具知识梳理(5) - MAT
性能优化工具知识梳理(6) - Memory Monitor & Heap Viewer & Allocation Tracker
性能优化工具知识梳理(7) - LeakCanary
性能优化工具知识梳理(8) - Lint

一、概述

今天，介绍两个比较简单的性能优化工具：

• 调试GPU过度绘制
• GPU呈现模式分析

其实这两个工具所解决的问题并不相同，之所以把它们放在一起，是因为它们都是Android手机自带的分析工具，我们只要在设置中对应的开关，就可以实时获得分析的结果，下面，我们就一起来看一下如何使用它们。

二、调试GPU过度绘制

2.1 应用场景

这个工具主要是用来检查布局中是否存在布局层次过深的问题。
首先，说明一下什么叫过度绘制，过度绘制指的是屏幕中同一个像素点被绘制了多次，举个例子，我们有一个红色ViewB，它先被绘制了一次，也就是说它所在区域的每个像素点都被绘制成了红色，这时候有一个蓝色ViewA，它盖在ViewB的上面，所以我们需要再把每个像素点都绘制成蓝色，这其实是不必要的，出现这种情况的时候，我们就可以通过这个工具来避免这种情况的发生。

2.2 使用方式

使用方式很简单，进入设置/辅助功能/开发者选项/，点击调试GPU过度绘制选项，在弹出框中选择第二项：

打开开关之后，可以看到界面当中会出现各种颜色的矩形，这就对应着过度绘制的等级，颜色越深，表明过度绘制越严重，也就是说同一个像素点被重复绘制的次数过多，下面，我们用一个简单的例子，来看一下过度绘制的等级。
首先看一下我们的布局：

我们布局呈现为逐级嵌套的层次，并且从fl_1开始都有一个白色的背景，那么我们看一下打开了调试GPU过度绘制开关之后的结果：

从上面的图中可以看到，fl_1的白色绘制是正常的，而fl_2和fl_1在由于有100dp的重叠区域，因此这部区域被检测成为了蓝色，而fl_3和fl_1/fl_2都有重叠，因此这部分区域被检测成为了绿色，fl_4和fl_5也是同理。
通过上面的例子，可以看到检测的结果分为四个等级，从低到高分别是：

• 蓝色
• 绿色
• 浅红
• 深红

在开发当中，我们在设计完界面之后，就应当通过这个工具来检测一下，看能否在保证实现功能的前提下，避免出现过度绘制。

三、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/

四、小结

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

---

更多文章，欢迎访问我的 Android 知识梳理系列：

• Android 知识梳理目录：http://www.jianshu.com/p/fd82d18994ce
• 个人主页：http://lizejun.cn
• 个人知识总结目录：http://lizejun.cn/categories/