老青菜

屏幕刷新原理

2018-09-19

说到界面卡顿,基本上就是两个原因:CPU耗时任务、GPU渲染耗时。
优化方案基本也是从这两个方向入手。但是为什么耗时的操作会导致丢帧?以及撕裂是怎么出现的?单缓冲、二级缓冲、三缓冲又是什么?
我们知道在整个显示过程中,需要 CPU、GPU、显示屏 三个模块协调工作,大致流程如下:

  1. CPU 负责计算数据,把计算好数据交给 GPU
  2. GPU 会对图形数据进行渲染,渲染好后放到缓冲区 buffer 里存起来
  3. 显示屏 以特定的 屏幕刷新率 把 buffer 里的数据呈现到屏幕上

屏幕发光原理

我们先了解一下,几种屏幕的发光原理,方面后面理解屏幕刷新流程:

  • CRT 显示器由很多荧光点组成,发光管是一个射线管,靠电子束高速击打荧光粉发光(据说离的太近,会有辐射)
  • LED 显示器是靠二极管发光,一直常亮的,自身有固定的刷新率(一般是 60HZ)


屏幕刷新过程

从发光原理来看,我们知道有一个电子束(类似扫描抢)的东西存在,屏幕的刷新就从这开始了:

  • 从初始位置(第一行左上角)开始扫描,从左到右,进行水平扫描(Horizontal Scanning
  • 每一行扫描完成,扫描线会切换到下一行起点,这个切换过程叫做水平消隐,简称 hblank(horizontal blank interval),并发送水平同步信号(horizontal synchronization,又称行同步)
  • 依次类推,整个屏幕(一个垂直周期)扫描完成后,显示器就可以呈现一帧的画面
  • 屏幕最后一行(一个垂直周期)扫描完成后,需要重返左上角初始位置,这个过程叫垂直消隐,简称 vblank(vertical blank interval
  • 扫描线回到初始位置之后,准备扫描下一帧,同时发出垂直同步信号(vertical synchronization,又称场同步)。

这里解释一下几个名词:

# 垂直消隐

完成一帧的扫描后,扫描点会回到初始点,准备扫描下一帧,这个过程会花一点时间,会有短暂的空白期。为了避免看到一个斜线显示在屏幕上,需要把扫描点变blank,这个过程就是垂直消隐,也叫场消隐。

# 垂直同步信号

当扫描点回到初始点,在准备扫描下一帧的时候,同时发出垂直同步信号,告诉显卡可以渲染下一帧了。这种情况下,显卡的渲染能力会受到 屏幕刷新率 的制约。如果显示器刷新频率是60Hz,显卡帧率最多只会达到60。对于高帧率的显卡,开启垂直同步自然会制约其性能发挥。

# 屏幕刷新频率

Refresh RateScanning Frequency ,是指屏幕刷新的频率,单位赫兹/Hz,一般是 60hz。也就是以这个频率发出 垂直同步信号,告诉 GPU 可以往 buffer 里写数据了,即渲染下一帧。


CPU GPU工作流程

我们再回来看第一部分 CPU 和 GPU,他们是如何工作的呢?

  1. CPU 绘制 View 树,计算好图形数据,提交到系统内存中
  2. CPU提交完成以后,通知 GPU 计算完成,系统总线会把数据拷贝到 GPU 的显存里
  3. GPU 开始处理数据,以特定的 显卡帧率 把数据写到显卡的缓冲区里
  4. 视频控制器收到 垂直同步信号 ,逐行读取帧缓冲区的数据,交给显示器

CPU、GPU 的计算和交互还是挺复杂的,涉及到虚拟内存地址映射,我们暂且不深入研究了,这里我们主要看第三步:

GPU 以特定的帧率把处理结果写到显卡的缓冲区里

这里我们就需要了解单缓冲、双缓冲、垂直同步信号的概念了,我们一个一个来看:

#显卡帧率

即 Frame Rate,单位 fps,是指 gpu 生成帧的速率,如 33 fps,60fps,越高越好。

#单缓冲

单缓冲,也就是只有一个缓冲区(buffer),GPU 向 buffer 中写入数据,屏幕从 buffer 中取图像数据、刷新后显示,理想的情况是 显卡帧率 屏幕刷新频率 相等,每绘制一帧,屏幕显示一帧。而实际情况是,二者之间没有必然的大小关系,如果没有同步机制,很容易出现问题。

  1. 例如,当显卡帧率大于屏幕刷新频率,屏幕准备刷新第2帧的时候,GPU 已经在生成第3帧了,就会覆盖第2帧的部分数据。
  2. 当屏幕开始刷新第2帧的时候,缓冲区中的数据一部分是第3帧数据,一部分是第2帧的数据,显示出来的图像就会出现明显的偏差,也就是撕裂(tearing)。

#双缓冲

为了单缓冲的撕裂和效率问题,双缓冲诞生了。
双缓冲有两个缓冲区:frame bufferback buffer,GPU 向 back buffer 中写数据,屏幕从 frame buffer 中读数据。这样不仅可以提升效率,而且可以避免因为帧率和刷新率不一致,导致图像数据错乱。
但是这两个 buffer怎么去同步呢?这里就需要 垂直同步信号
当开启垂直同步后,就会变成这样:

  1. GPU 会等待 垂直同步信号 发出后,复制 back buffer 的数据到 frame buffer里(交换两个缓冲区的内存地址)
  2. 渲染下一帧数据,写到缓冲区里

这样看来,帧率大于刷新频率时,帧率就会被迫跟刷新频率保持同步,从而避免撕裂现象。
需要注意的是,双缓冲 + 垂直同步信号仍然不能完全保证正常显示,比如说:

  1. 收到垂直同步信号时,如果 GPU 正在往缓冲区里写数据,CPU、GPU 绘制一帧的时间超过16ms,也就是一个 屏幕刷新周期 还没有准备完,这时候两个缓冲区不会发生复制。
  2. 当屏幕进入下一个刷新周期时,从 frame buffer 中取出的是上一帧数据,即两个刷新周期显示的是同一帧数据,也就是掉帧(Jank)。

为此,引入了 三缓冲,但是仍然避免不了卡顿和延迟的现象,这里就不详细介绍了,可以自行查阅相关资料。

参考链接

iOS 保持界面流畅的技巧(ibireme)
理解 VSync
Android 屏幕刷新显示机制

Tags: 性能
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章