显示器原理
首先我们先要了解一下屏幕的刷新原理，目前显示器大体分为CRT显示器和液晶显示器这两个种类。
屏幕图像的刷新通过扫描帧缓存位图的方式进行刷新，扫描分为随机扫描方式和光栅扫描方式。
1.随机扫描方式（如下图）电子束的移动方式是随机的，按照显示命令用画线的方式绘出图形。
图1
2.光栅扫描方式（如下图）是从上至下逐行扫描整个屏幕的
图2
3.显示器刷新屏幕原理（如下图），以CRT 的电子枪为例子
图3
如图所示，CRT 的电子枪从上到下逐行扫描，扫描完成后显示器就呈现一帧画面，随后电子枪回到初始位置继续下一次扫描。就是这样子不听的扫面，实现屏幕图像的刷新，而这样子的刷新操作就会出现本文说的撕裂现象，请往下了解。
图像显示到屏幕原理
图4
好明显可以知道图像显示是需要CPU与GPU协同合作完成的。那么他们的分工是如何呢？
· CPU：计算视图frame，图片解码，需要绘制纹理图片通过数据总线（bus）交给GPU。
· GPU：纹理混合，顶点变换计算，像素点的填充计算，然后得到的位图渲染到帧缓冲区中。
· 时钟信号：垂直同步信号V-Sync/水平同步信号H-Sync。（结合图3）
HSync：当电子枪换到新的一行，准备进行扫描时，显示器会发出一个水平同步信号，简称 HSync （horizonal synchronization）。
VSync：当一帧画面绘制完成后，电子枪回复到原位，准备画下一帧前，显示器会发出一个垂直同步信 号，简称VSync（vertical synchronization）。
屏幕撕裂的现象与原因
图5
为什么出现这种现象呢？
因为扫面显示缓冲区位图的时候，图片发生了切换，导致上半部分是旧的图片下半部分是新的图片。且由于各种原因（耗时，性能，计算复杂度），CPU与GPU的操作本身是好难实现同步的。
图6
那么解决撕裂现象，iOS这边引入了垂直同步-V-Sync + 双缓存-DoubleBuffering。
垂直同步信号其实就是给帧缓存加锁，确保在扫描原始位图时不会切换到新的位图，防止出现撕裂的情况。而双帧缓冲区的出现，就能够保证显示完原始图片时候在切换到新的位图进行显示。如图所示
图7
GPU 会预先渲染好一帧放入一个缓存区内（前帧缓存）。
在显示器发出VSync后，视频控制器的指针会指向前帧缓存区并开始读取，GPU开始渲染下一帧，并将渲染结果放入另一个缓存区（后帧缓存）。
在显示器发出新的VSync后，视频控制器的指针会指向后帧缓存区并开始读取，GPU开始渲染下一帧，并将渲染结果放入前帧缓存区。
双缓存和VSync造成的问题--掉帧（卡顿）
由于每一帧画面都要先经过CPU的计算然后交给GPU进行渲染，得出的位图放进缓冲区供视频控制器读取。由于垂直同步的机制，如果在一个VSync时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，而这时显示屏会保留之前的内容不变，也就造成界面卡顿。如下图所示，A、B代表两个缓存区。
图8
三缓冲区的出现
由于垂直信号+双缓冲区会出现掉帧的问题，所以有些设备就引入了三缓冲区+垂直信号，但iOS设备一直都是双缓存+垂直同步机制。
图9
三缓冲区的原理其实与双缓冲区原理差不多，只是多了一个可用的buffer，目的就是为了减少掉帧的机率，不能完全解决掉帧的问题。
网友评论