Android UI性能优化—过度绘制篇

Android UI性能优化——过度绘制篇

过度绘制（overdraw）

过度绘制介绍

每过几年，就会有传闻说某个博物馆在用x光扫描一副无价的名画之后，发现画作的作者其实重用了老的画布，在名画的底下还藏着另一副没有被发现的画作。有时候，博物馆还能用高级的图像技术来还原画布上的原作。android里面的view的绘制就是类似的情况。当android系统绘制屏幕的时候，先画父view，然后子view，再是更深的子view等等。这会导致所有的view都被绘制到了屏幕上，就像画家的画布一样，这些view都被他们的子view覆盖住了。

简单来说，过度绘制就是屏幕上的某个像素点在同一帧的时间内绘制了多次。

当设计上追求更华丽的视觉效果的时候，我们就容易陷入采用越来越多的层叠组件来实现这种视觉效果的怪圈。这很容易导致大量的性能问题，为了获得最佳的性能，我们必须尽量减少 Overdraw 的情况发生。

当我们来绘制一个界面时，会有一个 windows，然后是建立 Activity，在 Activity 里可以建立多个 view，或 view group，view 也可以嵌套 view。这些组件从上到下分布，上面的组件是可以被用户看见的，而在下面的组件是不可见的，但是我们依然要花很多时间去绘制那些不可见的组件，因为在某些时候，它也可能会显示出来。

过度绘制检测

按照以下步骤打开 Show GPU Overrdraw 的选项：设置 -> 开发者选项 -> 调试GPU过度绘制 -> 显示GPU过度绘制

蓝色，淡绿，淡红，深红代表了4种不同程度的Overdraw情况，

蓝色： 意味着overdraw 1倍。像素绘制了两次。大片的蓝色还是可以接受的（若整个窗口是蓝色的，可以摆脱一层）。
绿色： 意味着overdraw 2倍。像素绘制了三次。中等大小的绿色区域是可以接受的但你应该尝试优化、减少它们。
淡红： 意味着overdraw 3倍。像素绘制了四次，小范围可以接受。
深红： 意味着overdraw 4倍。像素绘制了五次或者更多。这是错误的，要修复它们。

我们的目标就是尽量减少红色 Overdraw，最理想的是蓝色,一个像素只绘制一次，合格的页面绘制是白色、蓝色为主，绿色以上区域不能超过整个的三分之一，颜色越浅越好。

可能有些人觉得不以为然，觉得没什么影响。话又说回来，GPU 绘制过渡对应用造成什么影响。
实际上，GPU 绘制影响的是界面的流畅度和用户体验，对于好的手机可能体验不到差距，对于差的手机，流畅度却起着关键的作用。

背景过度绘制优化

下面我们来通过一个Demo来检测过度绘制：

• activity_overdraw ：

  <?xml version="1.0" encoding="utf-8"?>  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:background="@android:color/white">
  
      <TextView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:padding="@dimen/mar_pad_len_30px"
          android:textSize="@dimen/text_size_100px"
          android:text="@string/String_overdraw_list"/>
  
      <android.support.v7.widget.RecyclerView
          android:id&