说到界面卡顿，基本上就是两个原因：CPU耗时任务、GPU渲染耗时。
优化方案基本也是从这两个方向入手。但是为什么耗时的操作会导致丢帧？以及撕裂是怎么出现的？单缓冲、二级缓冲、三缓冲又是什么？
我们知道在整个显示过程中，需要 CPU、GPU、显示屏 三个模块协调工作，大致流程如下：
- CPU 负责计算数据，把计算好数据交给 GPU
- GPU 会对图形数据进行渲染，渲染好后放到缓冲区 buffer 里存起来
- 显示屏 以特定的 屏幕刷新率 把 buffer 里的数据呈现到屏幕上
我们先了解一下，几种屏幕的发光原理，方面后面理解屏幕刷新流程：
- CRT 显示器由很多荧光点组成，发光管是一个射线管，靠电子束高速击打荧光粉发光（据说离的太近，会有辐射）
- LED 显示器是靠二极管发光，一直常亮的，自身有固定的刷新率（一般是 60HZ）
从发光原理来看，我们知道有一个电子束（类似扫描抢）的东西存在，屏幕的刷新就从这开始了：
- 从初始位置（第一行左上角）开始扫描，从左到右，进行水平扫描（
Horizontal Scanning） - 每一行扫描完成，扫描线会切换到下一行起点，这个切换过程叫做水平消隐，简称 hblank（
horizontal blank interval）,并发送水平同步信号（horizontal synchronization，又称行同步） - 依次类推，整个屏幕（一个垂直周期）扫描完成后，显示器就可以呈现一帧的画面
- 屏幕最后一行（一个垂直周期）扫描完成后，需要重返左上角初始位置，这个过程叫垂直消隐，简称 vblank（
vertical blank interval） - 扫描线回到初始位置之后，准备扫描下一帧，同时发出垂直同步信号（
vertical synchronization，又称场同步）。
这里解释一下几个名词：
# 垂直消隐
完成一帧的扫描后，扫描点会回到初始点，准备扫描下一帧，这个过程会花一点时间，会有短暂的空白期。为了避免看到一个斜线显示在屏幕上，需要把扫描点变blank，这个过程就是垂直消隐，也叫场消隐。
# 垂直同步信号
当扫描点回到初始点，在准备扫描下一帧的时候，同时发出垂直同步信号，告诉显卡可以渲染下一帧了。这种情况下，显卡的渲染能力会受到 屏幕刷新率 的制约。如果显示器刷新频率是60Hz，显卡帧率最多只会达到60。对于高帧率的显卡，开启垂直同步自然会制约其性能发挥。
# 屏幕刷新频率
即 Refresh Rate 或 Scanning Frequency ，是指屏幕刷新的频率，单位赫兹/Hz，一般是 60hz。也就是以这个频率发出 垂直同步信号，告诉 GPU 可以往 buffer 里写数据了，即渲染下一帧。
我们再回来看第一部分 CPU 和 GPU，他们是如何工作的呢？
- CPU 绘制 View 树，计算好图形数据，提交到系统内存中
- CPU提交完成以后，通知 GPU 计算完成，系统总线会把数据拷贝到 GPU 的显存里
- GPU 开始处理数据，以特定的 显卡帧率 把数据写到显卡的缓冲区里
- 视频控制器收到 垂直同步信号 ，逐行读取帧缓冲区的数据，交给显示器
CPU、GPU 的计算和交互还是挺复杂的，涉及到虚拟内存地址映射，我们暂且不深入研究了，这里我们主要看第三步：
GPU 以特定的帧率把处理结果写到显卡的缓冲区里
这里我们就需要了解单缓冲、双缓冲、垂直同步信号的概念了，我们一个一个来看：
#显卡帧率
即 Frame Rate，单位 fps，是指 gpu 生成帧的速率，如 33 fps，60fps，越高越好。
#单缓冲
单缓冲，也就是只有一个缓冲区（buffer），GPU 向 buffer 中写入数据，屏幕从 buffer 中取图像数据、刷新后显示，理想的情况是 显卡帧率 和 屏幕刷新频率 相等，每绘制一帧，屏幕显示一帧。而实际情况是，二者之间没有必然的大小关系，如果没有同步机制，很容易出现问题。
- 例如，当显卡帧率大于屏幕刷新频率，屏幕准备刷新第2帧的时候，GPU 已经在生成第3帧了，就会覆盖第2帧的部分数据。
- 当屏幕开始刷新第2帧的时候，缓冲区中的数据一部分是第3帧数据，一部分是第2帧的数据，显示出来的图像就会出现明显的偏差，也就是撕裂（
tearing）。
#双缓冲
为了单缓冲的撕裂和效率问题，双缓冲诞生了。
双缓冲有两个缓冲区：frame buffer、back buffer，GPU 向 back buffer 中写数据，屏幕从 frame buffer 中读数据。这样不仅可以提升效率，而且可以避免因为帧率和刷新率不一致，导致图像数据错乱。
但是这两个 buffer怎么去同步呢？这里就需要 垂直同步信号 了
当开启垂直同步后，就会变成这样：
- GPU 会等待 垂直同步信号 发出后，复制
back buffer的数据到frame buffer里（交换两个缓冲区的内存地址） - 渲染下一帧数据，写到缓冲区里
这样看来，帧率大于刷新频率时，帧率就会被迫跟刷新频率保持同步，从而避免撕裂现象。
需要注意的是，双缓冲 + 垂直同步信号仍然不能完全保证正常显示，比如说：
- 收到垂直同步信号时，如果 GPU 正在往缓冲区里写数据，CPU、GPU 绘制一帧的时间超过16ms，也就是一个 屏幕刷新周期 还没有准备完，这时候两个缓冲区不会发生复制。
- 当屏幕进入下一个刷新周期时，从
frame buffer中取出的是上一帧数据，即两个刷新周期显示的是同一帧数据，也就是掉帧（Jank）。
为此，引入了 三缓冲，但是仍然避免不了卡顿和延迟的现象，这里就不详细介绍了，可以自行查阅相关资料。
参考链接iOS 保持界面流畅的技巧（ibireme）
理解 VSync
Android 屏幕刷新显示机制
https://laoqingcai.com/ios-screen-refresh/