屏幕展示UI的原理

学习记录~
转：https://www.jianshu.com/p/5f142ecdd79c
一、基础概念
1、帧
帧(Frame)，一帧就是一幅静止的画面。

2、FPS
FPS(Frames Per Second)，显卡每秒钟输出多少帧画面。

3、显示器显示原理
显卡负责计算图像数据，显示器负责显示。当显卡计算完成后，会将数据输出给显示器进行显示，显示器会从左上角将画面一行行的显示在屏幕上。

逐行扫描&隔行扫描
4、刷新率
显示器每完成一次完整的扫描就是刷新一次，1秒内完成的刷新次数即刷新率。（如60Hz，代表每秒刷新60次）

二、显示问题与解决思路
1、画面撕裂
原因：
显卡不会将画面数据直接交给屏幕进行展示，而是通过帧缓存（在不进行任何设置的时候，显卡会有两个帧缓存）；

正常显示
显卡将数据写入后缓存，然后交换前后缓存，显示器从前缓存读取数据进行展示。如果显卡计算速度和显示器的显示速度一样，那我我们看到的画面都是正常的，没有问题。

画面撕裂
当显卡与显示器速率不匹配，
（1）显示器速率<显卡速率 ：显示器还没有扫描完，显卡已经计算完毕，此时交换前后缓存，显示器上就会出现上一帧的上半部分和下一帧的后半部分，导致撕裂。
（2）显示器速率>显卡速率 ：显示器扫描完毕，显卡还未计算完毕，此时显示器只能继续绘制上一帧的画面，等显卡计算完毕后交换缓存，绘制新画面的下半部分，导致撕裂。

解决思路：垂直同步
垂直同步会强制显示器扫描完毕后显卡才能将前后缓存交换。如果显卡绘制完毕显示器还没有扫描完，显卡就会等待显示器绘制完毕，再进行画面传递。

垂直同步示例
如图所示，当出图速率>显示器速率 时，显卡出图完毕后会等待同步信号，收到同步信号后再交换前后缓存，避免出现画面撕裂的情况。

2、垂直同步引起的新问题：卡顿
原因：
垂直同步解决了显卡出图速率>显示器扫描速率的撕裂问题；但是当出图速率<显示器速率 时；如上图中倒数第二部分情况，收到同步信号后，显卡还没有渲染出新的图，显示器只能将前缓存的内容再显示一边，从而导致某一帧展示时间偏长，就会产生卡顿的感觉。

解决思路：
为了解决这个问题，NVIDIA推出了一个自适应垂直同步功能。在出图速率<显示器速率 时，自动关闭垂直同步，从而使画面更流畅；在出图速率>显示器速率 时，自动开启垂直同步，减少撕裂。

3、垂直同步引起的新问题：延迟
原因：
由于垂直同步显卡画完之后会等待显示器，就会出现游戏里的画面已经发生变化，但是还没有反馈到显示器上。

解决思路：
1、三重缓存 ：前缓存，中缓存，后缓存，显卡可以多渲染一帧的画面，可以减缓延时；但是如果屏幕刷新率太低，还是会出现延迟的问题。
2、快速垂直同步 ：允许中后两个缓存进行交换，不影响显示器的画面；但是由于中后缓存交换，会抛弃很多过往帧，导致画面出现卡顿 的现象。