1. 什么是图像撕裂

图像撕裂是我们所观看到的一张图片发生上下错位，出现了明显的断层，如下图：

image.png

GPU进行渲染到显示的过程大致是一下这几步：
GPU进⾏渲染->帧缓存区⾥ ->视频控制器->读取帧缓存区信息(位图) -> 数模转化(数字信号处->模 拟型号) ->(逐⾏扫描)显示，
当第一帧图像扫描到某个位置时，GPU拿到新的数据并存到帧缓冲区，这个时候视频控制器从帧缓冲区扫描的是新拿到的一帧的图像，最后就形成了在我们肉眼看到的断层现象，即我们看到的一张图片其本质是两张图片组合而来（旧图片和新图片），究其原因就是视频控制器显示速度大于了GPU处理图形的速度。

2. 如何解决撕裂

双缓冲区

双缓冲区是在帧缓存区中开辟两个缓冲区，一个缓冲区通过视频控制器进行当前帧数据的读取显示，另一个缓冲区进行接收下一帧GPU渲染的图像。两个缓冲区都执行结束，然后再交换缓冲区。

这里解释一下什么是垂直同步Vsync

电子枪从上到下逐行扫描，扫描完成后显示器就呈现一帧画面。然后电子枪回到初始位置进行下一次扫描。为了同步显示器的显示过程和系统的视频控制器，显示器会用硬件时钟产生一系列的定时信号。当电子枪换行进行扫描时，显示器会发出一个水平同步信号（horizonal synchronization），简称 HSync；而当一帧画面绘制完成后，电子枪回复到原位，准备画下一帧前，显示器会发出一个垂直同步信号（vertical synchronization），简称 VSync。显示器通常以固定频率进行刷新，这个刷新率就是 VSync 信号产生的频率。虽然现在的显示器基本都是液晶显示屏了，但其原理基本一致。

image.png

为了解决撕裂，APPLE引入了: 垂直同步Vsync + 双缓存区 DoubleBuffering

(1)垂直同步Vsync:帧缓存区加锁 防⽌出现撕裂情况 。

(2)双缓存区 DoubleBuffering :就是GPU开辟AB两个帧缓冲区，显示到屏幕上的叫屏幕缓冲区，未显示到屏幕上的叫离屏缓冲区，图片渲染的时候，在离屏缓冲区渲染，渲染完成后，两个缓冲区交换。这样渲染完成的图片就可以显示出一张完整的图片了。从而去解决撕裂问题。

执行流程就是当A帧缓冲区拿到第一帧数据，给A缓冲区加上一把锁，屏幕控制器从A拿到数据并逐行扫描完成，A帧缓冲区解锁，并且屏幕控制器指向B帧缓冲区，B帧缓冲区加锁并逐行扫描显示，在屏幕控制器扫描B帧缓冲区的时候，A帧缓冲区拿到GPU传过来的新一帧数据，以此类推，解决撕裂问题。

3. 掉帧

当采用垂直同步Vsync + 双缓存区 DoubleBuffering时又会产生一个新的问题，出现了一个新的问题--->掉帧

特别说明：掉帧不是因为丢失了一帧的数据就叫掉帧！
掉帧指的是重复渲染同⼀帧数据，可以理解为我们所说的屏幕卡顿了。

撕裂和掉帧的取舍？
如果一旦屏幕产生撕裂，用户可能会觉得是手机本身的问题。
掉帧，则只是会使用户感觉手机产生了卡顿，何况掉帧的概率也比较小，并不是时时出现卡顿，所以相比于撕裂，掉帧相对而言是更可取的。

image.png

以60fps举例，每帧画面的处理时间大概在16.7ms(1s/60 ≈16.7ms)，当超过这个时间就会出现掉帧，如上图:当接收接收Vsync ,由于cpu/gpu还没处理完图⽚数据(大于了16.7ms) -> 拿不到FrameBuffer ->这个时候屏幕控制器只能显示同一帧的数据，即： 掉帧(重复渲染同⼀帧数据)。

为了减少掉帧（注意不是解决，掉帧问题只能尽量的减少，而不是解决，三级缓冲区也有可能出现掉帧），引入三缓存区，三缓冲区是为了充分利用CPU/GPU的空余时间，开辟ABC三个帧缓冲区，A显示到屏幕上, B也渲染好，C再从GPU拿取渲染数据，当屏幕缓冲区和帧缓冲区都弄好了，然后视频控制器再指向帧缓冲区的另外一个，再显示，这样交替，达到减少掉帧的情况，这样做就比二级缓冲区多了一个确认的操作。

总结:屏幕卡顿原因:

1. CPU/GPU 渲染流⽔线耗时过⻓->掉帧

2. 垂直同步Vsync + 双缓存区 DoubleBuffering 以掉帧作为代价->解决屏幕撕裂

3. 三缓存区: 合理充分使⽤CPU/GPU 减少掉帧次数;