同样附上我的github <a> https://github.com/BudSpore</a>
上一篇文章我们对UI的渲染机制有了简单的了解,通过渲染原理我们知道UI渲染流程要在16ms内完成,本篇文章我将给大家讲解Android性能优化里面的一小部分内容,给开发者们提供一些思路,其实造成性能问题还有很多,内存泄露,电量,线程阻塞,代码低耦合......好在现在有不少的解决方案,阿里巴巴的双11App流畅度做了极大的优化,作者最近因为找工作,从中对阿里的Weex产生了浓厚的兴趣,我会在后面的文章中再慢慢研究,不过Weex学习成本真是好大啊,感慨一下。
该文我们先从GPU分析。屏幕显示图片的时候,需要先经过CPU的计算加载到内存中,然后传递给GPU进行渲染。文字的显示比较复杂,需要先经过CPU换算成纹理,然后交给GPU进行渲染,返回到CPU绘制单个字符的时候,再重新引用经过GPU渲染的内容。动画则存在一个更加复杂的操作流程,我们在追求华丽的视觉效果的时候,会用到多层重叠视图去实现,这会导致性能上出现问题。
<h3>UI渲染会遇到的问题</h3>
<h4>GPU的过度绘制</h4>
Overdraw(过度绘制)是屏幕上的某个像素在同一帧的时间内被绘制了多次。在多层次的UI结构里面, 如果不可见的UI也在做绘制的操作,这就会导致某些像素区域被绘制了多次
Paste_Image.png图像覆盖现象会导致GPU绘制的过程中无用图层绘制在底层,造成不必要的浪费。
我用的是三星手机(不是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,然而我们视项目具体问题具体分析。
网友评论