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

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

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

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

然后就可以看到下图：

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

蓝色，淡绿，粉，深红代表了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
  

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

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

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