自底向上—iOS界面优化（第一话）

交互式图形显示系统渲染机制

对iOS应用进行界面响应速度上的优化，首先需要了解iOS系统的渲染机制，本文是本系列文章的第一话，先说原理，即交互式图形显示系统渲染机制。

1 交互式图形显示系统硬件体系结构

常见的PC与手机都属于某种形式的交互式图形显示系统。该系统的硬件体系结构如下图所示。从硬件层面来说，系统主要包含如下几部分：IO设备、CPU、内存、GPU、显存、监视器。

交互式图形显示系统硬件体系结构

现在，我们从“如何在显示器上展示存储在磁盘中的png图片？”这一问题出发，看看这几块硬件的作用。

1. 从磁盘（IO设备）中加载png图片到内存；

2. CPU对png图片进行解码，变成位图格式；

3. CPU向GPU提交相关命令，GPU从内存中读取位图数据到显存，生成texture

4. GPU把texture画入frame buffer；

5. 显示器把frame buffer中的数据显示出来；

6. 在显示器上移动图片位置，CPU 只需简单的告诉 GPU 新的图片位置,GPU重用存在的texture，生成新的frame buffer。

2 iOS渲染机制

2.1 iOS图形显示技术框架

为了分析影响iOS界面流畅性的因素，首先我们需要了解iOS图形显示技术框架，该框架如图所示。

iOS图形显示技术框架

由图可知，该框架一共有四层，顶层是UIKit—iOS中管理用户图形界面的高层API,里面有一堆UI相关的控件。UIKit的底层是Core Animation。Core Animation这个框架的名字让人费解，听起来是专门做动画的。其实不然，UIView后面的CALayer也属于Core Animation框架的范畴，即Core Animation也做图形渲染。在Core Animation之下又有OpenGL ES和Core Graphics框架，其中OpenGL ES主要用来操作GPU进行图形渲染而Core Graphics主要用来控制CPU进行图形渲染。以上三层都属于图形渲染的软件层，最后一层是图形显示硬件层。

2.2 Core Animation传输

UIKit对图形渲染都是基于Core Animation，所以我们直接来看Core Animation怎么跟APP交互的。Core Animation渲染流程如下图所示。

Core Animation渲染流程

图中可知，Core Animation管道由四个部分组成：Application的Core Animation部分、Render Server的Core Animation部分、GPU渲染、显示屏显示。接下来我们将分别讨论这4部分的作用。

2.2.1 Application的Core Animation部分

1.布局;包括layoutSubviews，addSubview，通常是CPU或者IO繁忙；

2.显示;调用view中被override的drawRect方法，draw字符串，通常是CPU或内存繁忙；

3.准备;图片解码，图片转换

4.提交;递归地打包layer层级关系，发送到Render Server

2.2.2 Render Server的Core Animation部分

Render Server是一个独立的渲染进程；

当它收到来自Application的事务时(IPC)，首先解析layer层级关系，即Decode；

然后，执行Draw Calls可以理解为执行相应的Open GL命令。

2.2.3 GPU渲染和显示屏显示

GPU渲染

1. Open GL的command buffer 进行顶点变换，三角形拼接，光栅化变为parameter buffer

2. parameter buffer进行像素变换，testing，blending生成frame buffer

显示屏显示

视频控制器从frame buffer中读取数据显示在显示屏上

流程如下：

Open GL渲染流程

2.2.4 Core Animation流水线与iOS渲染阿喀琉斯之踵

Core Animation的一次渲染需要3次垂直同步信号：

1. 第一次同步，执行Application的Core Animation部分——Commit Transaction以及Render Server的Core Animation第一部分——Decode；

2. 第二次同步，执行Render Server的Core Animation第二部分——Draw Calls以及GPU渲染部分

3. 第三次同步，执行显示屏显示frame buffer

要想不掉帧，以上每一部分都需要在16.67ms（60fps）之内完成，即尽量缩短或者平衡每一部分的耗时。

Core Animation流水线

3 本话主要参考资料 

《Computer Graphics with OpenGL,Third Edition》

《iOS Core Animation Advanced Techniques》

《Advanced Graphics and Animations for iOS Apps》（WWDC 2014 - Session 419 - iOS）

《An intro to modern OpenGL. Chapter 1: The Graphics Pipeline》