说到界面卡顿，基本上就是两个原因：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 和 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/

——————越是喧嚣的世界，越需要宁静的思考——————

合抱之木，生于毫末；九层之台，起于垒土；千里之行，始于足下。

积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。