过度绘制

过渡绘制

所谓过渡绘制,就是指一帧画面上,某一个像素区域被绘制了多次。

危害

过度绘制会浪费大量的CPU以及GPU资源,最直观的影响就是会导致APP卡顿。

检测工具

Android系统在开发者选项中为开发者提供了检测过渡绘制的工具“Enable GPU OverDraw”。激活后可以通过颜色判断过渡绘制的次数。

此处输入图片的描述

  1. 原色 – 没有被过度绘制 – 这部分的像素点只在屏幕上绘制了一次。
  2. 蓝色 – 1次过度绘制– 这部分的像素点只在屏幕上绘制了两次。
  3. 绿色 – 2次过度绘制 – 这部分的像素点只在屏幕上绘制了三次。
  4. 粉色 – 3次过度绘制 – 这部分的像素点只在屏幕上绘制了四次。
  5. 红色 – 4次过度绘制 – 这部分的像素点只在屏幕上绘制了五次。

如何避免过渡绘制

要解决过度绘制。即是要尽量减少屏幕上的红色区域,增加屏幕上的蓝色和绿色区域。我们的目标是要控制界面最多被过度绘制2次(不出现粉色和红色)。

核心思想:减少布局的层级。

具体做法

1.删除无用的控件和布局

2.合理的选择控件容器

  • 多使用LinearLayout和FrameLayout,因为这两种布局简单高效。
  • 能使用RelativeLayout和LinearLayout中的一种来实现,优先选择使用LinearLayout,因为RelativeLayout功能复杂,绘制起来需要花费更多的时间,参考:Android中RelativeLayout和LinearLayout性能分析&Android性能优化之减少UI过度绘制
  • 如果使用LinearLayout和FrameLayout需要嵌套才能实现效果,这时候可以选择使用RelativeLayout,因为嵌套增加了布局的层级,降低了绘制的效率。

3.使用merge减少布局的层级

4.使用ViewStup实现延迟加载

5.去掉window的默认的背景

当我们使用了Android自带的一些主题时,window会被默认添加一个纯色的背景,这个背景是被DecorView持有的。当我们的自定义布局时又添加了一张背景图或者设置背景色,那么DecorView的background此时对我们来说是无用的,但是它会产生一次Overdraw,带来绘制性能损耗。去掉window的背景可以在onCreate()中setContentView()之后调用
1
getWindow().setBackgroundDrawable(null);

或者在theme中添加

1
android:windowbackground="null";

6.去掉其他不必要的背景

有时候为了方便会先给Layout设置一个整体的背景,再给子View设置背景,这里也会造成重叠,如果子View宽度mach_parent,可以看到完全覆盖了Layout的一部分,这里就可以通过分别设置背景来减少重绘。再比如如果采用的是selector的背景,将normal状态的color设置为“@android:color/transparent",也同样可以解决问题。这里只简单举两个例子,我们在开发过程中的一些习惯性思维定式会带来不经意的Overdraw,所以开发过程中我们为某个View或者ViewGroup设置背景的时候,先思考下是否真的有必要,或者思考下这个背景能不能分段设置在子View上,而不是图方便直接设置在根View上。

7.ClipRect & QuickReject

为了解决Overdraw的问题,Android系统会通过避免绘制那些完全不可见的组件来尽量减少消耗。但是不幸的是,对于那些过于复杂的自定义的View(通常重写了onDraw方法),Android系统无法检测在onDraw里面具体会执行什么操作,系统无法监控并自动优化,也就无法避免Overdraw了。但是我们可以通过canvas.clipRect()来帮助系统识别那些可见的区域。这个方法可以指定一块矩形区域,只有在这个区域内才会被绘制,其他的区域会被忽视。这个API可以很好的帮助那些有多组重叠组件的自定义View来控制显示的区域。同时clipRect方法还可以帮助节约CPU与GPU资源,在clipRect区域之外的绘制指令都不会被执行,那些部分内容在矩形区域内的组件,仍然会得到绘制。除了clipRect方法之外,我们还可以使用canvas.quickreject()来判断是否没和某个矩形相交,从而跳过那些非矩形区域内的绘制操作。

Android画布剪裁函数clipRect详解

8.善用draw9patch

给ImageView加一个边框,你肯定遇到过这种需求,通常在ImageView后面设置一张背景图,露出边框便完美解决问题,此时这个ImageView,设置了两层drawable,底下一层仅仅是为了作为图片的边框而已。但是两层drawable的重叠区域去绘制了两次,导致overdraw。优化方案: 将背景drawable制作成draw9patch,并且将和前景重叠的部分设置为透明。由于Android的2D渲染器会优化draw9patch中的透明区域,从而优化了这次overdraw。 但是背景图片必须制作成draw9patch才行,因为Android 2D渲染器只对draw9patch有这个优化,否则,一张普通的Png,就算你把中间的部分设置成透明,也不会减少这次overdraw。

9.避免“OverDesign“

overdraw会给APP带来不好的体验,overdraw产生的原因无外乎:复杂的Layout层级,重叠的View,重叠的背景这几种。开发人员无节制的View堆砌,究其根本无非是产品无节制的需求设计。有道是“由俭入奢易,由奢入俭难",很多APP披着过度设计的华丽外衣,却忘了简单易用才是王道的本质,纷繁复杂的设计并不会给用户带来好的体验,反而会让用户有压迫感,产品本身也有可能因此变得卡顿。当然,一切抛开业务谈优化都是空中楼阁,这就需要产品设计也要有一个权衡,在复杂的业务逻辑与简单易用的界面展现中做一个平衡,而不是一味的OverDesign。

主要参考自:Android性能优化之减少UI过度绘制 & 布局优化

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器