最近开发中遇到一个问题,Activity之间跳转卡顿,点击按钮后,2-3秒后才会跳转到新的页面。
针对此问题进行了分析:
1、跳转动画
2、耗时操作在主线程中进行了
3、UI过度绘制
今天重点分析一下第三种UI过度绘制的问题,下面开始吧。
1、过度绘制,在屏幕一个像素上绘制多次,比如一个TextView设置了背景色,那么显示文本的像素至少绘了两次,一次是背景,一次是文本

Overdraw倍数 | 像素绘制次数 | 可接受区域 | |
---|---|---|---|
无色 | 0X | 1 | 全局 |
蓝色 | 1X | 2 | 大片 |
绿色 | 2X | 3 | 中等 |
浅红 | 3X | 4 | 小,少 |
暗红 | 4X | 5 | 无 |
从图中可以看出,这个页面存在严重的过度绘制问题,针对过度绘制的区域,我们来看一下是否能够优化。
查看布局发现多次设置背景色导致过度绘制,去掉多余的背景之后,绘制结果如图所示:

发现过度绘制的情况少了很多。
Trace for OpenGL
但是有时候出现过度绘制的区域是怎么形成的不是很清楚,这时候就可以借助工具Tracer for OpenGL ES。
使用方法:
1、Tools-->Android-->Android Device Monitor

2、Window-->Open Perspective

3、Trracer for OpenGL ES

4、

5、输入包名和要tracer的类名

6、点击Trace开始tracer

7、tracer完成后点击Stop Tracing,打开

点击观察每一帧的执行过程,发现绘制过程中,有些区域在经过两次绘制后没有什么变化,如图8所示,查看布局发现是因为中间部分多绘制了一次背景色才导致过度绘制的情况,把背景去掉。

通过GPU过度绘制区域显示和Tracer for OpenGL ES,解决了一部分过度绘制的问题,但是发现卡顿的现象依然存在,所以需要继续查找和分析。
2、Hierarchy View查找UI布局不合理的地方,主要包括以下三种类型:
(1)、没有用的父布局,可以通过<merge/>标签合并来减少UI的层次
(2)、使用线性布局Linearlayout排版导致UI层次变深,使用RelativeLayout代替LinearLayout,减少UI的层次
(3)、不常用的UI被设置撑了GONE,使用<ViewStud/>标签代替GONE提高UI性能。
<merge/>用于减少View数的层次来优化Android的布局,通过<merge/>标签可以把<merge/>标签里的UI合到上一层的layout中
<ViewStub/>不可见的,大小为0的View。当你需要时才会加载,使用它并不会影响UI初始化时的性能。
1、Tools-->Android-->Android Device Monitor
2、Window-->Open Perspective
3、Hierarchy View

选择查看的类,入股所示

观察后发现此LinearLayout下没有子View,查看布局发现并没有什么用处,进行删除

观察发现LinearLayout下又嵌套了LinearLayout也没包含子布局,查看布局发现是ScrollView不需要删除。

通过以上方法解决了一些布局不合理的地方,可是卡顿没多大变化,发现在我的红米3S上没什么问题,在rf上真的是,还需要继续从其他方面入手优化啊!!!!
网友评论