屏幕撕裂、卡顿原因

图1（图片来自网络）

如图1。 这种图片撕裂的情况大家都应该见过。

现在都是光栅扫描的方式进行显示（一行一行的扫描），显示一个图像的时间就是显示整个光栅的时间，和图像有多复杂是没有关系的。图像在一帧一帧的刷新显示，人的视觉是察觉不到这个变化，看着就是一个流程的视频。

而图片显示到显示屏上的流程是GPU拿到经过CPU处理的图片（CPU会将图片解压缩为位图，GPU渲染的都是位图）渲染 -> 帧缓存区 -> 视频控制器 -> 读取帧缓存区信息 -> 数模转化（数字信号转化为模拟信号）-> 显示（逐行扫描）。

在流程不出现问题的情况下，从帧缓存区拿到已经GPU处理好的信息 -> 扫描显示到屏幕上->刷新，同时帧缓存区会拿到下一帧的数据缓存起来， -> 从帧缓存区拿到数据显示到屏幕及时刷新。

但是如果GPU的渲染速度大于视频控制器显示图片的速度的时候， 就会出现，正在扫描的时候 刚好帧缓存区去拿了下一帧的数据，此时就会扫描到下一帧的数据信息，导致撕裂的情况出现。

而现在苹果使用了：

垂直同步Vsync（帧缓存区加锁，扫描完整后再去拿帧缓存区里的数据，防止出现撕裂） + 双缓存区（DoubleBuffering）技术

这个处理，虽然解决了撕裂的情况，但是会出现一个新的问题：掉帧，掉帧不是失去了一帧的数据，是重复渲染了同一帧数据，掉帧导致的情况就是我们看到的屏幕卡顿。

现在屏幕刷新频率是60fps， 即 1秒 刷新 60次。 如果在下一次刷新的时候还没有处理好一帧图像，帧缓存区里的数据没有拿到新的数据，导致一个重复渲染的情况。

图片来自网络

现在为了优化这个掉帧的情况， 出现了三缓存区，原理和双缓存区一样，不管是双缓冲还是三缓存，去优化的问题 本质上都是CPU/GPU渲染流水线耗时过长。