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

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

Paste_Image.png

该文我们先从GPU分析。屏幕显示图片的时候，需要先经过CPU的计算加载到内存中，然后传递给GPU进行渲染。文字的显示比较复杂，需要先经过CPU换算成纹理，然后交给GPU进行渲染，返回到CPU绘制单个字符的时候，再重新引用经过GPU渲染的内容。动画则存在一个更加复杂的操作流程，我们在追求华丽的视觉效果的时候，会用到多层重叠视图去实现，这会导致性能上出现问题。

UI渲染会遇到的问题

GPU的过度绘制

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，看到更多的蓝色区域。

解决方案

• 移除Window默认的Background
  getWidow.setBackgroundDrawable(null);
• 移除XML布局文件中非必需的Background
• 按需求显示占位背景图片
• 减少布局嵌套(扁平化的一个体现，减少View数的深度，也就减少了View树的遍历时间，渲染的时候，前后期的工作，总是按View树结点来)
  这些都是一些常识了，我简单带过。。

• ClipRect

  
  我们平时使用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，然而我们视项目具体问题具体分析。