关于屏幕卡顿原理及其解决方案

图片在屏幕上成像的过程

截屏2020-07-05 上午10.35.10.png
- 过程：GPU进行渲染->帧缓存区里（显存）->视频控制器->读取帧缓存区信息（位图）-> 数模转化（数字信号->模拟信号）->显示（逐行扫描）。

• 解释：
  - GPU渲染，相对于上图中显示处理器位置，将内容处理成位图。
  - 经过显示处理器后，会将相关的颜色值等内容保存在帧缓存区中。
  - 再由显示控制器读取帧缓存区信息（位图）。
  - 最后，数模转化，从最左侧顶部开始逐行扫描到屏幕上进行显示。如下图 截屏2020-07-05 上午10.46.44.png

完美情况

人肉眼对于超过连贯16帧的图像显示时，会判断为连贯的动图。
所以在上述流程执行时理想情况下，每秒执行为60fps，每扫描一张图->显示一张图，不断刷新，人不会感觉卡顿现象。那为什么会出现屏幕撕裂的现象呢？我们接着看。

屏幕撕裂

截屏2020-07-05 上午10.54.33.png image.png
- 屏幕撕裂的原因：
如前面讲的，屏幕扫描是逐行从上到下的显示过程。当
帧缓存区（旧的数据）->显示屏幕->帧缓存区（下一帧数据）->显示屏幕。如果未能及时更新，则就会这种新旧数据在一起显示的情况。也就是屏幕撕裂的原因。
截屏2020-07-05 上午11.42.52.png

解决方案

• 苹果解决方案： 垂直同步Vsync + 双缓存区 DoubleBuffering（此方案官方宣称会一直使用）

• 垂直同步：在帧缓存区加锁，防止出现撕裂的情况。

• 双缓存区 ：
  

  截屏2020-07-05 上午11.53.28.png
  撕裂：出现原因是因为CPU/GPU计算时的时间差。
  双缓存区就是第一个结果放于第一个缓存区，新来的就存于第二个缓存区，交替处理。从根本上杜绝撕裂。

• 掉帧： 在解决撕裂时，出现的新问题-掉帧，重复渲染同一帧数据。
  接收Vsync,CPU/GPU图片数据（速度问题）->拿不到 FrameBuffer ->掉帧（重复渲染统一帧数据）

• 掉帧解决方案：
  三缓冲区：在CPU/GPU闲置时间，A显示屏幕，B也渲染好。但是 三缓存区也有可能出现掉帧，概率极低。

屏幕卡顿原因：

• 1. CPU/GPU 渲染流水线耗时过长 ->掉帧。
• 2. 为了解决撕裂问题，采用垂直同步Vsync + 双缓冲区DoubleBuffering 方法 以掉帧为代价解决屏幕撕裂的问题。
• 3. 三缓存区合理使用减少掉帧次数。