iOS开发UI知识梳理

1. iOS 图像渲染原理

CPU和GPU两个硬件是通过总线连接的，CPU输出的结果，往往是一个位图，经由总线，在合适的时机上传给GPU，GPU拿到位图后做相应位图的图层渲染，之后会把这个结果放到帧缓冲（Frame Buffer）区中，由视频控制器根据V-Sync信号，在指定时间之前提取帧缓冲区中的屏幕显示内容，最终显示到手机屏幕上。

当我们创建一个UIView控件时，这个控件的显示部分，是由CALayer负责的，CALayer有一个contents属性，包含了最终要绘制到屏幕上的位图（比如一个UILabel的文本信息），系统会在合适的时机回调UIView的drawRect:方法，可供我们绘制一些自定义内容，最终绘制好的位图，会经由Core Animation框架提交给GPU部分的Open GL进行渲染，最后显示到屏幕上。

CPU的工作包含了：

• Layout：UI布局、文本计算
• Display：绘制
• Prepare：图片编解码
• Commit：提交位图

GPU的渲染工作：

• 顶点着色
• 图元装配
• 光栅化
• 片段着色
• 片段处理

2. 滑动视图优化方案

• CPU
  • 将对象的创建、调整、销毁工作放到子线程去做
  • 将预排版工作（布局计算、文本计算）放到子线程去做
  • 预渲染（文本等异步绘制，图片编解码等）
• GPU
  • 纹理渲染（避免离屏渲染）
  • 视图混合（减轻视图层级复杂性）

3. UIView的绘制原理

当我们调用[UIView setNeedsDisplay]方法之后，实际上并没有立刻开始当前视图的绘制工作；系统会立刻调用当前视图layer的同名方法[view.layer setNeedsDisplay]，相当于在当前layer上留了一个标记；接下来会在当前runLoop将要结束的时候调用[CALayer display]方法，此时才进入到当前视图真正的绘制流程中。

在[CALayer display]方法的内部实现中，会先判断layer的代理是否响应@selector(displayLayer:)方法；

• 如果layer的代理未响应@selector(displayLayer:)方法，会进入到系统绘制流程。
• 如果layer的代理响应了@selector(displayLayer:)方法，会进入异步绘制流程。

系统绘制流程

CALayer内部会创建一个backing store（CGContextRef），然后判断layer是否有delegate；

• 如果layer没有代理，会调用[CALayer drawInContext:]方法；
• 如果layer有代理，会调用[layer.delegate drawLayer:inContext:]方法，在系统内部做当前视图的绘制工作；然后会在一个合适的时机，回调[UIView drawRect:]方法。[UIView drawRect:]方法默认不做任何事情，这里的回调则允许开发人员在系统绘制的基础之上，做一些其他绘制工作；

最后由CALayer将backing store（也就是最终的位图）上传到GPU，此时系统绘制流程结束。

异步绘制流程

首先进入子线程，生成对应的bitmap位图：

• 通过CGBitmapContextCreate()方法，创建一个位图的上下文；
• 使用CoreGraphic API做位图的绘制工作；
• 使用CGBitmapContextCreateImage()函数根据当前所绘制的上下文，生成一张CGImage图片；

然后回到主线程，将生成的位图提交给CALayer的Contents属性。

4. 离屏渲染

On-Screen Rendering：意为当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行；

Off-Screen Rendering：意为离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

当我们设置UI视图的某些图层属性，它在合成之前，不能用于直接显示时，会触发离屏渲染。
在触发离屏渲染时，会增加GPU的工作量，有可能导致CPU和GPU工作总耗时超过16.7ms，从而造成UI的卡顿，掉帧。

说几种iOS开发的过程中常见的离屏渲染：

1. 使用了 mask 的 layer (layer.mask)
2. 需要进行裁剪的 layer (layer.masksToBounds / view.clipsToBounds)
3. 设置了组透明度为 YES，并且透明度不为 1 的 layer (layer.allowsGroupOpacity/ layer.opacity)
4. 添加了投影的 layer (layer.shadow*)
5. 采用了光栅化的 layer (layer.shouldRasterize)
6. 绘制了文字的 layer (UILabel, CATextLayer, Core Text 等)

为何要避免离屏渲染：
触发离屏渲染，会增加GPU的工作量，主要体现在两个方面：

• 创建新缓冲区：要想进行离屏渲染，首先要创建一个新的缓冲区。
• 上下文切换：离屏渲染的整个过程，需要多次切换上下文环境：先是从当前屏幕（On-Screen）切换到离屏（Off-Screen），等到离屏渲染结束以后，将离屏缓冲区的渲染结果显示到屏幕上有需要将上下文环境从离屏切换到当前屏幕。而上下文环境的切换是要付出很大代价的。

导致CPU和GPU工作总耗时有可能超过16.7ms，从而造成UI的卡顿，掉帧。