Android高级工程师之性能篇（2）--Android渲染过程

在讲Android渲染机制之前，我们需要补充一些图像相关知识。

1.背景–CPU和GPU（渲染原理）

在Android系统中，CPU在渲染方面主要承担测量、布局、记录、计算等操作，GPU则负责栅格化操作。

简单说，CPU的工作主要是将页面布局转为多边形或者纹理，然后传递给GPU进行栅格化，也就是放到像素点中变为相应的画面。

2.背景–fps

fps表示每秒帧数。也就是每一秒钟视频中的有效帧数，fps越高，那么视频会越流畅。

- 12fps 大约等于用手正常翻书的速度

- 24fps 大约为电影胶卷滚动的频率（人眼可以感知到的连续运动帧率）

- 30fps 比较流畅的视频内容

- 60fps Android手机屏幕的推荐帧率

下面讲讲为什么是60fps，因为Android系统内置16ms发出一个VSYNC信号（Vertical Synchronization垂直同步）,VSYNC可以理解为系统强制CPU和GPU进行计算和渲染操作，下面两张图对比了使用VSYNC和不使用VSYNC的区别。





从图中可以看到，如果不使用VSYNC信号，GPU和CPU的计算渲染时间比较随机，一旦大于16ms，那么就会出现16ms内没有刷新屏幕的情况从而导致卡顿。

但是，引入VSYNC信号也不是一劳永逸的，一旦16ms内的CPU或者GPU消耗时间过长，也会出现画面无法渲染的情况。

在解决渲染问题之前，我们就必须要知道是什么限制了CPU和GPU的时间：

多重布局导致的过度计算（CPU）

过度绘制（GPU）

因为Android4.1已经加入了VSYNC信号机制，那么解决了这两个问题，就解决了Android 的渲染问题。这两个问题和我们上一篇讲的内存管理一样，有两种处理方式：主动型和被动型，主动型要求我们在书写代码的时候就尽量简化布局，简化背景。我们这里主要讨论被动型，也就是如何检测和优化现有的应用。

3.解决方案–优化布局结构和单个View
4000
（Hierarchy Viewer）

使用方法：

1.模拟器–Android Device Monitor中添加Hierarchy Viewer功能即可，如图：



2.真机–通过github（https://github.com/romainguy/ViewServer）引入第三方库



Hierarchy Viewer是一个第三方库，引入之后通过红黄绿三种颜色表示这个view的测量（measure）、布局（layout）、draw（绘制）的相对时间，可以用来快速找到耗时的view。

4.解决方案–防止过度绘制（Overdraw检测）

检测过度绘制可以使用手机自带的检测工具，一般在这个位置：设置 -> 开发者选项 -> 调试GPU过度绘制 -> 显示GPU过度绘制



颜色越红代表一帧中同一个像素点绘制次数越多，红色表示绘制了5次以上，我们应该保证绘制次数尽量少，减少红色区域。具体的方法有如下几种。

- 1.去掉不必要的背景

子布局有背景时，去掉window背景和layout父布局背景，目的是为了防止出现多个背景的情况，针对window背景可以使用android:windowbackground="null"，针对父布局可以使用@android:color/transparent方法。

- 2.不常用的View使用GONE甚至是使用ViewStub

特定情况下显示的布局需要使用ViewStub控件或者GONE

<ViewStub
android:id="@+id/network_error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout="@layout/empty_view" />

3.Merge标签

merge主要是进行UI布局的优化的,删除多余的层级,优化UI。例如你的朱布局文件是垂直的，此时如果你引入一个垂直布局的，这时如果include布局使用的LinearLayout就没意义了，使用的话反而减慢你的UI表现。这时可以使用标签优化。标签也就是排除一个布局插入另一个布局产生的多余的ViewGroup。

<merge xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent" >
5
6     <TextView
7         android:layout_width="match_parent"
8         android:layout_height="wrap_content"
9         android:text="我是button3" />
10
11     <Button
12         android:layout_width="match_parent"
13         android:layout_height="wrap_content"
14         android:text="我是button2" />
15
16 </merge>

4.使用ReleativeLayout代替LinearLayout减少UI层次

这一节到此结束，下一节我们将介绍Android的电量优化。

==本节相关面试笔试题目：==

Android屏幕绘制中CPU和GPU的区别

Android界面卡顿的原理

谈谈你对VSYNC信号的理解

什么是过度绘制，如何处理过度绘制？