一、浅谈CPU与CPU

CPU：CPU的结构主要包括运算器（ALU, Arithmetic and Logic Unit）、控制单元（CU, Control Unit）、寄存器（Register）、高速缓存器（Cache）和它们之间通讯的数据、控制及状态的总线。需要具备处理不同数据类型的能力，具有很强的通用性，CPU内部结构非常复杂。CPU擅长像操作系统、系统软件和通用应用程序这类拥有复杂指令调度、循环、分支、逻辑判断以及执行等的程序任务。它的并行优势是程序执行层面的，程序逻辑的复杂度也限定了程序执行的指令并行性，上百个并行程序执行的线程基本看不到。
GPU：GPU由数量众多的计算单元和超长的流水线组成，适合处理大量的类型统一的数据。但GPU无法单独工作，必须由CPU进行控制调用才能工作。GPU以图形类数值计算为核心。用于处理类型高度统一、相互无依赖的大规模数据和不需要被打断的纯净的计算环境。GPU擅长的是图形类的或者是非图形类的高度并行数值计算，GPU可以容纳上千个没有逻辑关系的数值计算线程，它的优势是无逻辑关系数据的并行计算。

0.png

由此可见，渲染流程中要经过大量的运算操作，这些运算工作更适合拥有更多独立计算单元的GPU并行运算处理，运算后的结果在呈现给屏幕显示即可。

二、iOS移动设备的渲染流程

1.png

1.首先要渲染的内容会由CPU进行解码操作，解码完之后的数据会存至系统的内存当中，这部分工作还是由CPU处理；

2.解码后的数据在由GPU经过渲染流水线加工，渲染流水线流程如下图所示

2.png

3.经过渲染流水线加工过后，最终会生成位图（bitmap）。早期的设备，在GPU中生成的位图会经由系统总线在传回系统内存中，系统内存中有专门的帧缓存区来存储位图，然后再由显示控制器经由系统总线在系统内存的帧缓存区拿出位图显示，这样渲染的效率并不高。后来显存问世了，在GPU加工后生成的位图直接存放在显存中，屏幕控制器从显存中读取出数据并将数字信号转换为模拟信号，最后屏幕光子束开始扫描，屏幕扫描由下图所示：

3.png

电子束扫描的过程中，屏幕就能呈现出对应的结果，每次整个屏幕被扫描完一次后，就相当于呈现了一帧完整的图像。屏幕不断地刷新，不停呈现新的帧，就能呈现出连续的影像。而这个屏幕刷新的频率，就是帧率（Frame per Second，FPS）。由于人眼的视觉暂留效应，当屏幕刷新频率足够高时（FPS 通常是 50 到 60 左右），就能让画面看起来是连续而流畅的。对于 iOS 而言，app 应该尽量保证 60 FPS 才是最好的体验。

三、渲染过程中产生的撕裂与掉帧问题

1.屏幕撕裂

屏幕撕裂产生的根本原因是屏幕在扫描帧率A的过程中，CPU和GPU完成了新一帧帧率B的数据处理和渲染工作，将帧缓存区存储的位图A替换成刚刚完成的位图B。可是屏幕光束已经显示了帧率A的部分图形，后面部分光束继续扫描，此时的帧缓存区已经是帧率B，结果已经扫描的部分显示帧率A未扫描的部分继续扫描显示帧率B，这就造成了撕裂问题；

4.png

2.垂直同步信号 Vsync + 双缓冲机制 Double Buffering

垂直同步信号 Vsync：为了解决屏幕撕裂的问题，苹果引入了垂直同步信号 Vsync技术，相当于将帧缓存区上了一把锁，当屏幕光束完成一帧的绘制（也是是光束完成一次扫描后），电子枪会回到原位，准备画下一帧前，显示器会发出一个垂直同步信号，此时才可以更新帧缓存区中下一帧的位图。这样就解决了图形撕裂的问题；
掉帧：垂直同步信号的技术引进虽然解决了图形撕裂的问题但是也带来了新的问题。如果垂直同步信号发出时，CPU和GPU仍未完成新一帧的处理工作，则会继续显示当前帧，直到新的一帧处理完闭，这种现象称为掉帧，我们看到的效果就是屏幕卡顿；
多缓冲区：为了优化掉帧的问题，iOS设备会始终使用双缓存，并开启垂直同步；目前安卓系统是三缓存+垂直同步；相比单缓存区，双缓存在CPU和GPU空闲时多储备了一帧的数据，三缓存多储备了两帧的数据，虽然不能完成解决掉帧问题，也使得掉帧的概率大大下降。
由此可见CPU 和 GPU 耗时问题是造成掉帧现象的根本原因。所以开发时，也需要分别对 CPU 和 GPU 压力进行评估和优化。

三、Core Animation

在iOS实际开发中，我们经常使用到Core Animation进行一些动画的效果的实现。但实际上它是一个复合引擎，主要职责包含:渲染、构建和实现动画。动画只是这个引擎功能中的冰山一角。

6.png
我们在开发中对CALayer特别熟悉，iOS中任何控件的显示都由layer负责绘制以及动画。那么UIView又负责做什么呢？UIView负责布局、子视图的管理以及处理视图的事件。这也符合职责分离的原则。

1.CALayer与位图（bitmap）

点进CALayer.h文件，如下图

7.png

contents 提供了 layer 的内容，是一个指针类型，在 iOS 中的类型就是 CGImageRef（在 OS X 中还可以是 NSImage）。而我们进一步查到，Apple 对 CGImageRef 的定义是：A bitmap image or image mask。实际上CGImageRef就是位图。

2.Core Animation 流水线

首先，由 app 处理事件（Handle Events），如：用户的点击操作，在此过程中 app 可能需要更新视图树，相应地，图层树也会被更新。
其次，app 通过 CPU 完成对显示内容的计算，如：视图的创建、布局计算、图片解码、文本绘制等。在完成对显示内容的计算之后，app 对图层进行打包，并在下一次 RunLoop 时将其发送至 Render Server，即完成了一次 Commit Transaction 操作。
Render Server 主要执行 Open GL、Core Graphics 相关程序，并调用 GPU
GPU 则在物理层上完成了对图像的渲染。
最终，GPU 通过 Frame Buffer、视频控制器等相关部件，将图像显示在屏幕上。

8.png

参考文章：
iOS 图像渲染原理：
http://chuquan.me/2018/09/25/ios-graphics-render-principle/

iOS 渲染机制解析