Android性能优化系列——过度绘制解决方案

同样附上我的github <a> https://github.com/BudSpore</a>
上一篇文章我们对UI的渲染机制有了简单的了解,通过渲染原理我们知道UI渲染流程要在16ms内完成,本篇文章我将给大家讲解Android性能优化里面的一小部分内容,给开发者们提供一些思路,其实造成性能问题还有很多,内存泄露,电量,线程阻塞,代码低耦合......好在现在有不少的解决方案,阿里巴巴的双11App流畅度做了极大的优化,作者最近因为找工作,从中对阿里的Weex产生了浓厚的兴趣,我会在后面的文章中再慢慢研究,不过Weex学习成本真是好大啊,感慨一下。

Paste_Image.png

该文我们先从GPU分析。屏幕显示图片的时候,需要先经过CPU的计算加载到内存中,然后传递给GPU进行渲染。文字的显示比较复杂,需要先经过CPU换算成纹理,然后交给GPU进行渲染,返回到CPU绘制单个字符的时候,再重新引用经过GPU渲染的内容。动画则存在一个更加复杂的操作流程,我们在追求华丽的视觉效果的时候,会用到多层重叠视图去实现,这会导致性能上出现问题。
<h3>UI渲染会遇到的问题</h3>
<h4>GPU的过度绘制</h4>
Overdraw(过度绘制)是屏幕上的某个像素在同一帧的时间内被绘制了多次。在多层次的UI结构里面, 如果不可见的UI也在做绘制的操作,这就会导致某些像素区域被绘制了多次

图像覆盖现象会导致GPU绘制的过程中无用图层绘制在底层,造成不必要的浪费。

Paste_Image.png

我用的是三星手机(不是Note 7),Android机大概按照以下步骤打开Show GPU Overrdraw:设置 -> 开发者选项 -> 调试GPU过度渲染--> 显示过度渲染区域

Paste_Image.png

然后就可以看到下图:

Paste_Image.png

我们看到了屏幕里多了不少带颜色的框框,我们对这些框框分析一下:

Paste_Image.png

蓝色,淡绿,粉,深红代表了4种不同程度的GPU过度绘制情况,
蓝色: GPU过度绘制了 1倍。像素绘制了两次。大片的蓝色还是可以接受的(若整个窗口是蓝色的,可以摆脱一层)。
绿色: GPU过度绘制了 2倍。像素绘制了三次。中等大小的绿色区域是可以接受的但你应该尝试优化、减少它们。
淡红: GPU过度绘制了 3倍。像素绘制了四次,小范围可以接受。
深红: GPU过度绘制了 4倍。像素绘制了五次或者更多。这是错误的,要修复它们。
我们的目标就是尽量减少红色Overdraw,看到更多的蓝色区域。
<h4>解决方案</h4>

  • 移除Window默认的Background
    getWidow.setBackgroundDrawable(null);
  • 移除XML布局文件中非必需的Background
  • 按需求显示占位背景图片
  • 减少布局嵌套(扁平化的一个体现,减少View数的深度,也就减少了View树的遍历时间,渲染的时候,前后期的工作,总是按View树结点来)
    这些都是一些常识了,我简单带过。。
  • <h6>ClipRect</h6>
    我们平时使用NavigationView的时候,侧滑出Nav Drawer,Nav Drawer里面不可见的View就不会被Overdraw。


    Paste_Image.png

    图中橙色区域不会被重绘。

一旦我们自定义View,重写onDraw()方法,方法里对View的操作将会重绘,然而我们可以通过canvas.clipRect()来帮助系统识别那些可见的区域。这个方法可以指定一块矩形区域,只有在这个区域内才会被绘制,其他的区域会被忽视。这个API可以很好的帮助那些有多组重叠组件的自定义View来控制显示的区域。同时clipRect方法还可以帮助节约CPU与GPU资源,在clipRect区域之外的绘制指令都不会被执行,那些部分内容在矩形区域内的组件,仍然会得到绘制
应用场景:当我们在自定义View的时候,可能会出现图片重叠导致Overdraw,当我们使用canvas.clipRect(),会提高性能,另外,在onDraw方法里面尽量不要有耗时操作,

  • ViewStub(延迟化加载)
    主要的应用场景就比如说新闻App,打开某个界面,如果有网络就展示内容,没有网络就会提示出网络连接出错,这个出错提示就是ViewStub,在正确的条件下才会显示出内容。
  • include(引入布局)
    当不同的界面有相同的UI元素的时候我们可以使用include标签,不过引入的布局还可能会被嵌套在LinearLayout,RelativeLayout里面。所以引入merge标签。
  • merge
    在引入布局文件里面,最外层可以用merge替代LinearLayout,RelativeLayout,这样把子UI元素直接衔接在include位置。

另外RelativeLayout通常会对它们的子视图进行2次测量,子视图使用了layout_weight属性的LinearLayout也会对它的子视图进行2次测量;我们一般推荐使用RelativeLayout,然而我们视项目具体问题具体分析。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,710评论 4 376
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,839评论 2 308
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,295评论 0 255
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,776评论 0 223
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,198评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,074评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,200评论 2 322
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,986评论 0 214
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,733评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,877评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,348评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,675评论 3 265
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,393评论 3 246
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,209评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,996评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,212评论 2 287
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 36,003评论 2 280

推荐阅读更多精彩内容

  • 注意事项: 布局优化;尽量使用include、merge、ViewStub标签,尽量不存在冗余嵌套及过于复杂布局(...
    HarryXR阅读 5,045评论 1 19
  • 原文: http://www.cnblogs.com/yezhennan/p/5442031.html UI性能测...
    vb12阅读 4,156评论 0 9
  • 什么是过度绘制(OverDraw) 在多层次重叠的UI结构里面,如果不可见的UI也在做绘制的操作,会导致某些像素区...
    Rave_Tian阅读 9,133评论 2 29
  • 太长不看版:在 Android UI 布局过程中,遵守一些惯用、有效的布局原则,可以制作出高效且复用性高的 UI。...
    Mupceet阅读 3,725评论 0 14
  • 写计划的时候不知道自己喜欢什么?是不是很悲哀?为了一些东西放弃自己的爱好,最后自己都不知道自己喜欢什么了,今天看到...
    参参窝阅读 171评论 0 0