一、图片撕裂
image.png
如图，很多人在游戏中应该都见过这种情况，在某个界面，出现上下两部分断层的情况，这个就是图片撕裂。
1、出现原因
出现图片撕裂的主要原因就是，视频控制器的显示速度比不上GPU的处理图形的速度。
在GPU拿到位图数据之后，会通过GPU进行图形处理，并显示到屏幕上，过程为 GPU渲染->存入帧缓存区-> 视频控制器 -> 读取帧缓存区信息 -> 数模转化(数字信号处->模拟型号) -> 逐行显示到屏幕上。
因此，当第一帧的图像正在逐行显示且并未完全显示完成的时候，GPU拿到了新的数据，且存入了帧缓存区，而后视频控制器读取的帧缓存区的位图信息，是新的一帧的位图信息，这个时候，就会出现图片断层，即图片撕裂。
2、解决办法
在iOS中引入了垂直信号vSync+双缓存区doubleBuffering的方式来解决图片撕裂。
2.1 垂直信号vSync
帧缓存区加锁，在上一帧缓存区位图数据完全显示之前，GPU即使拿到了新一帧的数据，也不存入帧缓存区，直到上一帧显示完全。
2.2 双缓存区doubleBuffering
GPU会开辟A和B两个缓存区。
基本流程就是，当A 帧缓存区拿到一帧数据，就会给A 帧缓存区加上锁，此时，如果GPU拿到新一帧的数据，则会存入B帧缓存区，不会存入A帧缓存区，直到A帧缓存区的数据逐行扫描完成之后，A 帧缓存区才会解锁。
二、掉帧
通过垂直信号vSync + 双缓存区doubleBuffering能够较好的解决图片撕裂的问题，但是同时，却引入了另外一个问题，那就是掉帧。
掉帧.png
1、形成原因
掉帧的本质其实是显示了同一帧的数据，在iOS中，每一帧的处理时间是1/60 ≈ 16.67ms。在vSync信号到来之后，CPU会开始做各种计算、解码等工作，并将结果交给GPU，由GPU做各种变换、合成、渲染等工作，而后GPU会把结果交给帧缓存区，在下一次vSync到来的时候，逐行显示到屏幕上。而掉帧的主要原因是 ，当下一次vSync到来的时候，在二级缓存的情况之下，CPU/GPU并没有成功的把数据提交给帧缓存区，而此时，屏幕只能渲染旧的帧，因此形成了掉帧。
2、解决办法？？？
事实上，掉帧的问题不能够完全解决，只能尽可能的减少。
为了尽可能减少掉帧问题，从而引入了三级缓存。本质就是再增加一个离屏缓存区。
基本流程是，在显示A缓存区数据的时候，同时B和C缓存区会渲染下两帧的数据，周而复始的，CPU/GPU会不停的循环处理、渲染下两帧的数据，从而缓解掉帧的问题。
综上总结一下屏幕卡顿原因
1、CPU/GPU 渲染流⽔线耗时过⻓导致掉帧
- 垂直同步Vsync + 双缓存区 DoubleBuffering 以掉帧为代价解决了图片撕裂；
- 三缓存区: 合理使⽤CPU/GPU的空闲时间， 以减少掉帧次数。
网友评论