iOS的渲染基础

一.什么是撕裂 : 就是一张图片在显示的时候分成了两半，即出现断层。

出现撕裂图过程：

1. 图像 -> CPU将图片解码，交给GPU -> GPU进行图像的渲染 -> 存储到到帧缓存区 -> 视频控制器进行读取帧缓存区信息，并刷新部件(视频控制器只是负责帧缓存区与显示器的对应关系) -> 显示器逐行扫描显示。
2. 在视频控制器进行读取显示图像时，当当前这一帧的内容还未读取完成时，GPU将新的一帧内容提交到帧缓冲区并把两个帧缓冲区进行更新后，视频控制器就会把新的一帧数据的下半段显示到屏幕上，造成画面撕裂的现象。

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

二.图像撕裂如何解决呢 (苹果解决方案)

垂直同步（Vertical synchronization）+ 双缓冲区

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

三.掉帧/卡顿

******* 掉帧不是因为丢失了一帧的数据就叫掉帧！ *******

以上图片是A区域还在处理同一帧的数据，还没有处理完就到下一帧，这是就是掉帧（重复渲染同一帧数据）

在使用垂直同步和双缓冲区时，都有一个等待显示完成的过程，从而刷新的时间变慢，刷新频率减少，眼睛看到的图像就会变成卡顿。

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

总结:屏幕卡顿原因:

1. CPU/GPU 渲染流⽔线耗时过⻓ -> 掉帧
2. 垂直同步Vsync + 双缓存区 DoubleBuffering 以掉帧作为代价 => 屏幕撕裂
3. 三缓存区: 合理使⽤CPU/GPU 减少掉帧次数;