Android开发者选项之GPU过度绘制

做设计的人很少能知道GPU过度绘制是个什么鬼？跟设计有什么关系？今天就让大家了解了解，首先来普及一下Android开发者选项中的 Debug GPU overdraw。

GPU过度绘制定义

如果你粉刷过一个房间或一所房子，就会知道给墙壁涂上颜色需要做大量的工作。假如你还要重新粉刷一次的话，第二次粉刷的颜色会覆盖住第一次的颜色，第一次的颜色就永远不可见了，等于你第一次粉刷做的大量工作就完全被浪费掉。这太可怕了。

同样的道理，如果在你的应用程序中浪费精力去绘制一些东西同样会产生性能问题。过度绘制这个名词就是用来描述屏幕上一个像素在单个帧中被重绘了多少次。

GPU过度绘制就指的是在屏幕一个像素上绘制多次(超过一次)，GPU过度绘制或多或少对性能有些影响。

GPU过度绘制分析

过度绘制其实是一个性能和设计的交叉点。我们在设计上追求很华丽的视觉效果，但一般来说这种视觉效果会采用非常多的层叠组件来实现，这时候就会带来过度绘制的问题。我们再来看看具体显示在Android界面层级关系：

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

检测过度绘制

如何查看是否过度绘制：

设置-开发者选项-调试GPU过度绘制-显示过度绘制区域(过度渲染等，不同机器可能不同)

然后就可以看看你的应用是否存在过度绘制的情况了。

那么如何判断界面是否存在过度绘制呢？

开启后，点击我们的应用，可以看到各种颜色的区域,其中：

最理想的是蓝色,一个像素只绘制一次，合格的页面绘制是白色、蓝色为主，绿色以上区域不能超过整个的三分之一，颜色越浅越好。

那么从设计的角度来看你的应用是否GPU绘制过度，看一下以下几个界面：

从上图我们可以看出：

Google now页面GPU绘制比较正常基本都是在1x-2x范围内，QQ的绘制情况也还可以，2345手机助手和2345影视大全过度绘制是很严重的，基本都是超过3x，4x。

可能有些人觉得不以为然，觉得没什么影响。话又说回来，GPU绘制过渡对应用造成什么影响。

实际上，GPU绘制影响的是界面的流畅度和用户体验，对于好的手机可能体验不到差距，对于差的手机，流畅度却起着关键的作用。

可以大部分设计师关注的都是开发是否有100%还原你的设计稿，应用的交互体验是否良好，没有几个设计师会去关注GPU过度绘制问题。

本人接触到这方面知识也是优化我们开发人员指导，当时我们正在做界面层级简化，而应用界面出现了2种背景颜色，如图（左边的背景为白色，右边的背景为浅灰）。

开发让我们梳理一下页面层级，得出右边的管理页面要再多绘制一层；

开发人员建议我们以后在设计中，梳理一下页面之前层级关系，尽量保持整个界面的架构统一，大背景色一致性。而且开发人员在开发过程中，尽量用简化的结构来布局，保持界面还原度的同时也要考虑界面的流畅度。

列举一下我们2345王牌助手首页界面前后优化对比，看了以后，感觉整个人的心情都好了有木有啊，感觉更高大上了很多。

经过优化后的页面一次绘制时间能提升3ms-5ms,可以看下面这张图来进行对比，绿色色块部分为提升空间。

这次优化工作对我来说，是一次宝贵的经验，我们一直在努力让设计变得更好，但有时候设计不只是表面的美化工作，还是深度的改善用户体验。在这里我想感慨一下，一个项目的成功上线，里面不知道有多少酸甜苦辣，不知道有多少人在为之努力，感谢所有工作人员的不懈努力，辛苦你们啦！

总结原因：

1.太多重叠的背景

重叠着的背景有时候是有必要的，有时候是没必要的。这要视你的项目具体情况而定。

2.太多叠加的View

或者本来这个UI布局就很复杂或者你是为了追求一个炫丽的视觉效果，这都有可能使得很多view叠加在一起。这个情况非常普遍，下面的建议中会谈谈怎么减少这种情况带来的影响。

3.复杂的Layout层级

复杂的层级关系，这个在布局中也很常见，下面也会说这种情况怎么做可以尽可能的减少过度绘制。

建议：

1.太多重叠的背景

这个问题其实最容易解决，建议前期在设计时尽量保持整体背景统一，另外开发可以检查你在布局和代码中设置的背景，有些背景是被隐藏在底下的，它永远不可能显示出来，这种没必要的背景一定要移除，因为它很可能会严重影响到app的性能。

2.太多重叠的view

第一个建议是：使用ViewStub来加载一些不常用的布局，它是一个轻量级且默认不可见的视图，可以动态的加载一个布局，只有你用到这个重叠着的view的时候才加载，推迟加载的时间。第二个建议是：如果使用了类似viewpager+Fragment这样的组合或者有多个Fragment在一个界面上，需要控制Fragment的显示和隐藏，尽量使用动态地Inflation view，它的性能要比SetVisiblity好。

3.复杂的Layout层级

这里的建议比较多一些，首先推荐用Android提供的布局工具Hierarchy Viewer来检查和优化布局。第一个建议是：如果嵌套的线性布局加深了布局层次，可以使用相对布局来取代。第二个建议是：用标签来合并布局，这可以减少布局层次。第三个建议是：用标签来重用布局，抽取通用的布局可以让布局的逻辑更清晰明了。记住，这些建议的最终目的都是使得你的Layout在Hierarchy Viewer里变得宽而浅，而不是窄而深。

文／布滟布羽（简书作者）

原文链接：http://www.jianshu.com/p/ab0cf2697236

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。