UI优化之-GPU Rendering Profile
image.png
序言
app的性能优化可分为 流畅，稳定性，耗电量，流量节省 几个大类，其中与流畅挂钩的就是UI界面的优化程度，在17年的开发中接触过一些UI界面卡顿的问题，在开发代码的过程中也应用到一些技巧，UI优化的文章也接触了很多，但一直没有做一个系统的归纳总结。这篇归纳总结就从比较常用的GPU-RENDERING-PROFILE 开始总结.
GPU RENDERING PROFILE
Android在开发者工具选项中提供了一些列性能调优的辅助工具，其中就包括 过度绘制显示和GPU渲染分析（这个翻译不知道对不对）
GPU-RENDERING-PROFILE是什么
GPU-RENDERING-PROFILE(后面简称GRP)可以通过在屏幕上绘制滚动的柱状图来显示绘制每一帧所消耗的时间，每根柱子由不同的颜色构成，分别代表UI绘制的不同阶段，并且在柱状图的中间还有一根绿色的横线代表16ms的绘制时间基准.GRP会统计并显示app最近运行的128帧.
image.png
android是如何将view绘制到屏幕
要理解柱状图不同颜色的含义，就有必要先了解android绘制view到屏幕上的大致流程.
总体来说，代码中的view控件转化为屏幕上可见的图像就是转换成为屏幕上一个一个像素点的过程,这个过程叫做栅格化(rasterization).
image.png
image.png
上图直接用了链接中文章中的贴图:
http://hukai.me/android-performance-patterns/
这张图很清晰地展示了整个栅格化的大致过程(缺少将view转化为纹理的一步)，如果加上这一步，整个过程为:
- TextView,Button等等控件通过cpu计算转换为内存中的polygons（多边图形）和texture(纹理)
- cpu通过OpenGL|ES的接口将纹理数据传递给GPU渲染处理,在这个过程中,由DisplayList这个结构负责保存绘制用到的所有信息,在Displaylist无需重新创建或改变的情况下,GPU可以直接使用这里的数据进行渲染.通过第二张图我们可以看出invalidate()这个操作会导致displaylist的刷新和重新执行.(这里的过程有些复杂，有篇文章讲解得不错)
http://djt.qq.com/article/view/987 - GPU将渲染图形显示到屏幕
为了保证不掉帧,整个所有过程加起来需要在16ms内完成。了解了图形显示的大致流程，再回头看柱状图的含义就容易理解了.
柱状图不同颜色的不同含义
| color | name | meaning |
|---|---|---|
| 墨绿色 | MiscTime/VSync Delay | 代表在连续两帧间的时间间隔,可能是因为子线程执行时间过长抢占了UI线程被cpu执行的机会. |
| 深绿色 | Input Handing | 代表app在用户输入事件回调中花费的时间，这部分过高可能意味着app处理用户输入事件时间过长，建议将操作分流到工作线程. |
| 绿色 | Animation | 代表为该帧内所有animator求值(属性动画中代表通过估值器计算属性的具体值)所花费的时间.如果这部分过高，代表自定义animator性能不佳或者更新view属性引发了某些意外操作. |
| 淡绿色 | Measure/Layout | 代表了onLayout和onMeasure方法消耗的总时间，这段很高代表遍历整个view树结构花费了太多时间. |
| 深蓝色 | draw | 代表创建更新DisplayList的时间，过高代表在onDraw中花费过多时间,可能是自定义画图操作太多或执行了其它操作. |
| 浅蓝色 | sync&upload | 向CPU传输Bitmap花费的时间,过高代表了加载了大量图形. |
| 红色 | command Issue | Android 2D渲染器向OpenGL发出命令绘制或重绘display lists 花费的时间，柱子的高度等于所有Display list绘制时间的总和. |
| 橘色 | swap buffers | 代表cpu在等待gpu完成工作,如果过高代表GPU需要完成的工作过多. |
image.png
来看下每种颜色代表的是整个显示流程的哪一步
| color | name | meaning |
|---|---|---|
| 墨绿色 | MiscTime/VSync Delay | 代表在连续两帧间的时间间隔,可能是因为子线程执行时间过长抢占了UI线程被cpu执行的机会. |
| 深绿色 | Input Handing | 代表app在用户输入事件回调中花费的时间，这部分过高可能意味着app处理用户输入事件时间过长，建议将操作分流到工作线程. |
| 绿色 | Animation | 代表为该帧内所有animator求值(属性动画中代表通过估值器计算属性的具体值)所花费的时间.如果这部分过高，代表自定义animator性能不佳或者更新view属性引发了某些意外操作. |
| 淡绿色 | Measure/Layout | 代表了onLayout和onMeasure方法消耗的总时间，这段很高代表遍历整个view树结构花费了太多时间. |
| 深蓝色 | draw | 代表创建更新DisplayList的时间，过高代表在onDraw中花费过多时间,可能是自定义画图操作太多或执行了其它操作. |
| 浅蓝色 | sync&upload | 向CPU传输Bitmap花费的时间,过高代表了加载了大量图形. |
| 红色 | command Issue | Android 2D渲染器向OpenGL发出命令绘制或重绘display lists 花费的时间，柱子的高度等于所有Display list绘制时间的总和. |
| 橘色 | swap buffers | 代表cpu在等待gpu完成工作,如果过高代表GPU需要完成的工作过多. |
https://developer.android.com/studio/profile/inspect-gpu-rendering.html
上面的表格是对各种颜色含义的简单的介绍，官方文档中有更详细的介绍,针对每一点都铺开来讲,这里暂时先不完整记录，只先附上链接.
https://developer.android.com/topic/performance/rendering/profile-gpu.html
这篇总结简单记录了 GRP的使用和含义，over.
