「性能优化」- 卡顿优化

为什么会出现卡顿?

屏幕刷新过程

我们以 CRT 显示器为例,它的显示方式是如下图所示的从上到下逐行扫描,扫描完整个屏幕即绘制完一帧画面,电子枪恢复到原位,准备画下一帧之前,显示器会发出一个 VSync(垂直同步信号)。显示器通常以固定频率进行刷新,这个刷新率就是 VSync 的频率。

CPU 计算好显示内容提交至 GPU 进行渲染,GPU 渲染完成存放到帧缓冲区,视频控制器会按照 VSync 信号逐帧读取帧缓冲区的数据,然后在显示器上进行显示。
-w589

双缓冲机制

-w608

单缓冲区的情况下,帧缓冲区的读取跟刷新都有很大的效率问题,为了提高效率,我们引入了双缓冲区,即双缓冲机制。如上图所示,双缓冲区分为前、后两个缓冲区,前缓冲区(Frame Buffer)就是当前屏幕上显示的图像,显示器不断的从前缓冲区读取数据。后缓冲区(Back Buffer)是即将要显示的图像,GPU 渲染好后的图像就存放到后缓冲区。

-w719

如上图所示,GPU 渲染好下一帧图片之后,把图片数据放入 Back Buffer,然后进行缓冲区的交换,实际是交换了 Frame Buffer 和 Back Buffer 的内存地址,此时 Frame Buffer 就变成了 Back Buffer,Back Buffer 变成了 Frame Buffer。

-w707

如上图所示,显示器屏幕内容显示到一半的时候,GPU 将新一帧的图片提交到帧缓冲区,进行缓冲区交换后,视频控制器就会把新一帧图片的下半部分数据进行读取并显示到屏幕上,造成了画面撕裂。

垂直同步

为了解决图片撕裂的问题,引入了垂直同步机制(简称V-Sync),开启了垂直同步,等待显示器发送垂直同步信号后,才进行新一帧的渲染和缓冲区切换,这样解决了图片撕裂的问题。

如果一个 VSync 时间内,没有完成图片的渲染,则那一帧会被丢弃,不进行缓冲区的交换,等待下一次信号,屏幕保留之前的内容不变,这就是卡顿的原因,这种情况我们称之为掉帧。

引起卡顿原因有哪些?

通过掉帧的原理我们可以知道,CPU 跟 GPU 不论哪个阻碍了显示流程,都会造成掉帧现象,所以我们可以分析 CPU 和 GPU 的资源消耗原因进行优化。

如何进行卡顿的优化?

线上卡顿如何检测?