找出Android卡顿的元凶——渲染性能优化( 三 ) _Android

文章插图

VSYNC 信号如果你的某个操作花费时间是 24ms，系统在得到 VSYNC 信号的时候就无法进行正常渲染，这样就发生了丢帧现象。那么用户在 32ms 内看到的会是同一帧画面。

文章插图

丢帧用户容易在 UI 执行动画或者滑动 ListView 的时候感知到卡顿不流畅，是因为这里的操作相对复杂，容易发生丢帧的现象，从而感觉卡顿。
有很多原因可以导致丢帧，也许是因为你的 layout 太过复杂，无法在 16ms 内完成渲染，有可能是因为你的 UI 上有层叠太多的绘制单元，还有可能是因为动画执行的次数过多。这些都会导致 CPU 或者 GPU 负载过重。
过度重绘过度重绘（Overdraw）描述的是屏幕上的某个像素在同一帧的时间内被绘制了多次。在多层次的UI结构里面，如果不可见的 UI 也在做绘制的操作，这就会导致某些像素区域被绘制了多次。这就浪费大量的 CPU 以及 GPU 资源。

文章插图

Overdraw
当设计上追求更华丽的视觉效果的时候，我们就容易陷入采用越来越多的层叠组件来实现这种视觉效果的怪圈。这很容易导致大量的性能问题，为了获得最佳的性能，我们必须尽量减少 Overdraw 的情况发生。
如何找出过度重绘？很荣幸 Android 系统的开发者模式中，提供了一些工具可以帮助我们找出过度重绘。
首先，打开手机里面的开发者选项（这个都找不到，那还开发什么 Android？），可以找到下面几个选项：
调试 GPU 过度重绘（Debug GPU overdraw）我们可以通过手机设置里面的开发者选项，打开显示过渡绘制区域（Show GPU Overdraw）的选项，可以观察 UI 上的 Overdraw 情况。

文章插图

Debug GPU overdraw
蓝色，淡绿，淡红，深红代表了 4 种不同程度的 Overdraw 情况，我们的目标就是尽量减少红色 Overdraw，看到更多的蓝色区域。

真彩色：没有过度绘制
蓝色：过度重绘 1 次

像素绘制了 2 次。大片的蓝色还是可以接受的（若整个窗口是蓝色的，可以摆脱一层）。

绿色：过度重绘 2 次

像素绘制了 3 次。中等大小的绿色区域是可以接受的但你应该尝试优化、减少它们。

淡红：过度重绘 3 次

像素绘制了 4 次，小范围可以接受。

深红：过度重绘 4 次或更多

像素绘制了 5 次或者更多。这是错误的，要修复它们。
Overdraw 有时候是因为你的UI布局存在大量重叠的部分，还有的时候是因为非必须的重叠背景。
例如：某个 Activity 有一个背景，然后里面的 Layout 又有自己的背景，同时子 View 又分别有自己的背景。仅仅是通过移除非必须的背景图片，这就能够减少大量的红色 Overdraw 区域，增加蓝色区域的占比。这一措施能够显著提升程序性能。

文章插图

优化过度重绘GPU 呈现模式分析（Profile GPU Rendering）
我们可以通过手机设置里面的开发者选项中找到 GPU 呈现模式分析（Peofile GPU Rendering tool），然后选择在屏幕上显示为条形图（On screen as bars）。

文章插图

Profile GPU Rendering
在 Android 系统中是以 60fps 为满帧，绿色横线为 16ms 分界线，低于绿线即为流畅。
屏幕下方的柱状图每一根代表一帧，其高度表示「渲染这一帧耗时」，随着手机屏幕界面的变化，柱状图会持续刷新每帧用时的具体情况（通过高度表示）。
那么，当柱状图高于绿线，是不是就说明我卡了呢？其实这不完全正确，这里就要开始分析组成每一根柱状图不同颜色所代表的含义了。

文章插图

gpu 16ms

红色

代表了「执行时间」，它指的是 Android 渲染引擎执行盒子中这些绘制命令的时间。
假如当前界面的视图越多，那么红色便会「跳」得越高。实际使用中，比如我们平时刷淘宝 App 时遇到出现多张缩略图需要加载时，那么红色会突然跳很高，但是此时你的页面滑动其实是流畅的，虽然等了零点几秒图片才加载出来，但其实这可能并不意味着你卡住了。