Android Tech And Perf

Android 性能优化之过渡绘制 - 理论篇

Word count: 2.5kReading time: 10 min
2014/10/20

博客有一段时间没有更新了,到了新公司后,一直比较忙,博客也更新地不那么频繁了,倒是利用这个VPS搭建的VPN每天都在用,速度也蛮不错的。最近一直在看Android上和性能相关的部分,也就是所谓的Android性能优化,才发现Android性能这一块,自己懂得还是太少了,所以从上层开始看,也算是一点一点入门吧。这个系列将讲解学习过程中总结的和性能相关的内容。

首先将讲解一下GPU过渡绘制,也是开发者最直接接触的部分吧,这个内容将分为两个部分来将讲,第一部分初步讲解一下gpu过渡绘制的原理,和一些优化建议,第二部分将用实际例子来讲解优化GPU过渡绘制的一般步骤。

过渡绘制概念

GPU过渡绘制的概念:GPU过度绘制指的是在屏幕一个像素上绘制多次(超过一次),比如一个TextView后有背景,那么显示文本的像素至少绘了两次,一次是背景,一次是文本。GPU过度绘制或多或少对性能有些影响,设备的内存带宽是有限的,当过度绘制导致应用需要更多的带宽(超过了可用带宽)的时候性能就会降低。带宽的限制每个设备都可能是不一样的。

过渡绘制的原因

  1. 太多的View叠加
  2. 复杂的层级叠加
  3. 更长的inflation时间

过渡绘制和不合理的xml布局的影响

  1. 布局文件是一个xml文件,inflate布局文件其实就是解析xml,根据标签信息创建相应的布局对象并做关联。xml中的标签和属性设置越多,节点树的深度越深,在解析时要执行的判断逻辑、函数的嵌套和递归就越多,所以时间消耗越多;
  2. inflate操作只是布局影响的第一个环节,一个界面要显示出来,在requestLayout后还要执行一系列的measure、layout、draw的操作,每一步的执行时间都会受到布局本身的影响。而界面的最终显示是所有这些操作完成后才实现的,所以如果布局质量差,会增加每一步操作的时间成本,最终显示时间就会比较长。

过渡绘制的一些基本概念:

Android提供了三个工具来帮助辨别和解决重绘问题:Hierachy Viewer,Tracer for OpenGL和Show GPU overdraw。前两个可以在ADT工具或者独立的monitor工具中找到,最后一个是在开发者选项的一部分.

  1. GPU过渡绘制测试:对于过度绘制的测试主要通过人工进行测试,也是发现应用过渡绘制的首选途径 .通过打开开发者选项中的 显示GPU过度绘制(魅族手机:设置—辅助功能–开发人员工具–硬件加速渲染—调试GPU过渡绘制— 显示过渡绘制区域. (魅族手机需要打开开发者模式:需要在电话界面输入: ##6961## )) 来进行测试(PS:只有android4.2及以上的版本才具备此功能)
  2. 颜色标识: GPU过渡绘制从好到差:蓝-绿-淡红-红
    • 蓝色1x过度绘制
    • 绿色2x过度绘制
    • 淡红色3x过度绘制
    • 红色超过4x过度绘制
  3. 验收标准:
    • 控制过度绘制为2x
    • 不允许存在4x过度绘制
    • 不允许存在面积超过屏幕1/4区域的3x过度绘制(淡红色区域)

优化工具介绍

  1. Lint工具:

    • Eclipse中,点击即可,下面的窗口中会出现提示,根据提示和具体解决办法消除.
    • Android Studio自带Lint工具,不合理或者需要优化和注意的地方,会用黄色标记出来.
    • Lint工具不仅对布局有很好的优化建议,对代码中不合理的活着存在潜在风险的模块也会提出优化建议,所以一个好的建议是:多使用Lint工具检查自己的应用,尽量消除所有的建议.
    • Lint工具可以用命令行来运行,具体使用可以参考:tools.android.com
      Lint
  2. Lint工具的提升例子(摘自官方文档):

    • Use compound drawables(使用compound drawables) - A LinearLayout which contains an ImageView and a TextView can be more efficiently handled as a compound drawable.
    • Merge root frame(使用Merge根框架) - If a FrameLayout is the root of a layout and does not provide background or padding etc, it can be replaced with a merge tag which is slightly more efficient.
    • Useless leaf(去除无用的分支) - A layout that has no children or no background can often be removed (since it is invisible) for a flatter and more efficient layout hierarchy.
    • Useless parent (去除无用的父控件)- A layout with children that has no siblings, is not a ScrollView or a root layout, and does not have a background, can be removed and have its children moved directly into the parent for a flatter and more efficient layout hierarchy.
    • Deep layouts (注意Layout的深度) - Layouts with too much nesting are bad for performance. Consider using flatter layouts such as RelativeLayout or GridLayout to improve performance. The default maximum depth is
  3. Hierarchy Viewer:此工具是一个ADT工具(或者monitor,最新版本的SDK建议不使用独立的HV工具,而是直接在monitor中进行操作.)的一部分,可以被用作对视图层级进行快速解读。在处理布局问题时特别有用,对于性能问题也很适用。Hierarchy Viewer默认只能在非加密设备使用,例如工程机,工程平板或者模拟器。为了能够在任何手机上使用Hierarchy Viewer,你得在你的应用中添加ViewServer,这是一个开源库,使用方法可以参考这里。连接上设备,打开Hierarchy Viewer(定位到tools/目录下,直接执行hierarchyviewer的命令,选定需要查看的Process,再点击Load View Hierarchy会显示出当前界面的布局Tree。在每个模块的Traffic light上有三个灯,分别代表了Measure, Layout and Draw三个步骤的性能。

布局优化建议

在Android UI布局过程中,通过遵守一些惯用、有效的布局原则,我们可以制作出高效且复用性高的UI,概括来说包括如下几点:

  • 尽量多使用RelativeLayout和LinearLayout, 不要使用绝对布局AbsoluteLayout,

    • 在布局层次一样的情况下, 建议使用LinearLayout代替RelativeLayout, 因为LinearLayout性能要稍高一点.
    • 在完成相对较复杂的布局时,建议使用RelativeLayout,RelativeLayout可以简单实现LinearLayout嵌套才能实现的布局.
  • 将可复用的组件抽取出来并通过include标签使用;

  • 使用ViewStub标签来加载一些不常用的布局;

  • 动态地inflation view性能要比SetVisiblity性能要好.当然用VIewStub是最好的选择.

  • 使用merge标签减少布局的嵌套层次

  • 去掉多余的背景颜色(查看背景颜色是否多余,可以将HierarchyView中的图导出为psd文件,然后用Photoshop查看.具体可以参考这个视频)

    • 对于有多层背景颜色的Layout来说,留最上面一层的颜色即可,其他底层的颜色都可以去掉
    • 对于使用Selector当背景的Layout(比如ListView的Item,会使用Selector来标记点击,选择等不同的状态),可以将normal状态的color设置为"@android:color/transparent”,来解决对应的问题
  • 内嵌使用包含layout_weight属性的LinearLayout会在绘制时花费昂贵的系统资源,因为每一个子组件都需要被测量两次。在使用ListView与GridView的时候,这个问题显的尤其重要,因为子组件会重复被创建.所以要尽量避免使用Layout_weight

  • 使得Layout宽而浅,而不是窄而深(在Hierarchy Viewer的Tree视图里面体现)

源码相关

另外有能力看源码的同学,下面是绘制OverDraw的源码位置:/frameworks/base/libs/hwui/OpenGLRenderer.cpp,有兴趣的可以去研究研究。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
void OpenGLRenderer::renderOverdraw() {
if (mCaches.debugOverdraw && getTargetFbo() == 0) {
const Rect* clip = &mTilingClip;

mCaches.enableScissor();
mCaches.setScissor(clip->left, mFirstSnapshot->height - clip->bottom,
clip->right - clip->left, clip->bottom - clip->top);

// 1x overdraw
mCaches.stencil.enableDebugTest(2);
drawColor(mCaches.getOverdrawColor(1), SkXfermode::kSrcOver_Mode);

// 2x overdraw
mCaches.stencil.enableDebugTest(3);
drawColor(mCaches.getOverdrawColor(2), SkXfermode::kSrcOver_Mode);

// 3x overdraw
mCaches.stencil.enableDebugTest(4);
drawColor(mCaches.getOverdrawColor(3), SkXfermode::kSrcOver_Mode);

// 4x overdraw and higher
mCaches.stencil.enableDebugTest(4, true);
drawColor(mCaches.getOverdrawColor(4), SkXfermode::kSrcOver_Mode);

mCaches.stencil.disable();
}
}

void OpenGLRenderer::countOverdraw() {
size_t count = mWidth * mHeight;
uint32_t* buffer = new uint32_t[count];
glReadPixels(0, 0, mWidth, mHeight, GL_RGBA, GL_UNSIGNED_BYTE, &buffer[0]);

size_t total = 0;
for (size_t i = 0; i < count; i++) {
total += buffer[i] & 0xff;
}

mOverdraw = total / float(count);

delete[] buffer;
}

还有QA可能用得到的一个指标:OverDraw数值,这个的源码位置在Framework/base/core/java/android/view/HardwareRender.java中(5.0中去掉了这个数值的显示)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
private void debugOverdraw(View.AttachInfo attachInfo, Rect dirty,
HardwareCanvas canvas, DisplayList displayList) {

if (mDebugOverdraw == OVERDRAW_TYPE_COUNT) {
if (mDebugOverdrawLayer == null) {
mDebugOverdrawLayer = createHardwareLayer(mWidth, mHeight, true);
} else if (mDebugOverdrawLayer.getWidth() != mWidth ||
mDebugOverdrawLayer.getHeight() != mHeight) {
mDebugOverdrawLayer.resize(mWidth, mHeight);
}

if (!mDebugOverdrawLayer.isValid()) {
mDebugOverdraw = -1;
return;
}

HardwareCanvas layerCanvas = mDebugOverdrawLayer.start(canvas, dirty);
countOverdraw(layerCanvas);
final int restoreCount = layerCanvas.save();
layerCanvas.drawDisplayList(displayList, null, DisplayList.FLAG_CLIP_CHILDREN);
layerCanvas.restoreToCount(restoreCount);
mDebugOverdrawLayer.end(canvas);

float overdraw = getOverdraw(layerCanvas);
DisplayMetrics metrics = attachInfo.mRootView.getResources().getDisplayMetrics();

drawOverdrawCounter(canvas, overdraw, metrics.density);
}
}

private void drawOverdrawCounter(HardwareCanvas canvas, float overdraw, float density) {
final String text = String.format(\"%.2fx\", overdraw);
final Paint paint = setupPaint(density);
// HSBtoColor will clamp the values in the 0..1 range
paint.setColor(Color.HSBtoColor(0.28f - 0.28f * overdraw / 3.5f, 0.8f, 1.0f));

canvas.drawText(text, density * 4.0f, mHeight - paint.getFontMetrics().bottom, paint);
}

参考文章

  1. 优化过程
  2. 反编译并添加gpu显示
  3. http://developer.android.com/training/improving-layouts/optimizing-layout.html#Inspect
  4. http://developer.android.com/training/improving-layouts/reusing-layouts.html
  5. http://developer.android.com/training/improving-layouts/loading-ondemand.html
  6. http://developer.android.com/training/improving-layouts/smooth-scrolling.html
  7. http://developer.android.com/tools/help/hierarchy-viewer.html
  8. http://tools.android.com/tips/lint

关于我 && 博客

  1. 关于我 , 非常希望和大家一起交流 , 共同进步 .
  2. 博客内容导航
  3. 优秀博客文章记录 - Android 性能优化必知必会

一个人可以走的更快 , 一群人可以走的更远

微信扫一扫

CATALOG
  1. 1. 过渡绘制概念
  2. 2. 过渡绘制的原因
  3. 3. 过渡绘制和不合理的xml布局的影响
  4. 4. 过渡绘制的一些基本概念:
  5. 5. 优化工具介绍
  6. 6. 布局优化建议
  7. 7. 源码相关
  8. 8. 参考文章
  • 关于我 && 博客