1.图像撕裂

1.1 图像显示过程

图像 -> CPU将图片解码，交给GPU -> GPU进行图像的渲染 -> 存储到到帧缓存区 -> 视频控制器进行读取帧缓存区信息，并刷新部件(视频控制器只是负责帧缓存区与显示器的对应关系) -> 显示器逐行扫描显示。

1.2图像撕裂怎么形成

在视频控制器进行读取显示图像时，当当前这一帧的内容还未读取完成时，GPU将新的一帧内容提交到帧缓冲区并把两个帧缓冲区进行更新后，视频控制器就会把新的一帧数据的下半段显示到屏幕上，造成画面撕裂的现象。

1.3图像撕裂形成的原因

既撕裂就是在于显卡输出帧的速度比显示器快，显示器的处理速度跟不上显卡，在显示器处理显卡丢过来的第1帧的时候，第2帧就又到了，导致同一个画面同时出现1、2两帧，撕裂就产生了。

2.解决撕裂

为了解决图像撕裂，引入了垂直同步信号和双缓存区

垂直同步信号

我们开启垂直同步，显卡绘制3D图形前会等待垂直同步信号，当该信号到达时，显卡开始绘制3D图形，如果显卡性能较为强劲，在下个垂直同步信号到来之前已经完成了对该帧的渲染，显卡就会暂停处理，等下个垂直同步信号到来后才开始渲染下一帧。通俗的来讲，垂直同步就是让显卡每秒输出的帧数等于显示器的刷新率。垂直同步是用来防止画面撕裂的，反之，关闭垂直同步就会出现撕裂、跳帧的情况。跳帧和撕裂形成原因是相同的，只是跳帧中显卡速度更快一些。垂直同步信号是给缓存区加把锁，从而降低显卡写入缓存区的速度。

双缓存区

双缓冲甚至是多缓冲，在许多情况下都很有用。一般需要使用双缓冲区的地方都是由于“生产者”和“消费者”供需不一致所造成的。这样的情况在很多地方后可能会发生，使用多缓冲可以很好的解决。

双缓存的工作流程

如上图所示，此时由于处于初始状态，画图操作的结果都在后缓冲区中，而屏幕上显示的则是前缓冲区中的内容。此时画图操作尚未完成。

画图操作完成之后，页转换操作开始执行，示意图如图所示：

如上图所示，画图操作结束，下一个画图操作的结果保存对象指向前缓冲区，屏幕的显示对象指向后缓冲区，此时前缓冲区变成实际意义上的后缓冲区，后缓冲区变成实际意义上的前缓冲去，即实现“页交换”操作。

双缓存或者三缓存存在的掉帧

在 VSync 信号到来后，系统图形服务会通过 CADisplayLink 等机制通知 App，App 主线程开始在 CPU 中计算显示内容，比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去，由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去，等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制，如果在一个 VSync 时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，等待下一次机会再显示，而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。