CPU 与 GPU简介
CUP: 计算机的控制核心和运算核心，它的主要功能便是解释计算机发出的指令以及处理电脑软件中的大数据，其中包含ALU算术逻辑运算单元、控制单元、Cache高速缓冲存储器以及Bus总线 。用于处理复杂性高的工作，任务之间依赖性高，通过时间片的快速切换实现并发。
CPU内部结构.png
GPU:GPU是图像处理器的缩写，它是一种专门为PC或者嵌入式设备进行图像运算工作的微处理器，是连接计算机和显示终端的纽带。它是专为执行复杂的数学和几何计算而生的。它有多个计算单元组成，可以通过多个计算单元实现依赖性较低的多任务高并发。
GPU内部结构.png
iOS屏幕上的画面都是经过CPU、GPU一系列的渲染流水线完成的：
图形图像渲染过程.png
光栅扫描显示系统
计算机显示方式的演变：有随机扫描显示-->光栅扫描显示
随机扫描显示：随机扫描显示器一条线一条线地画图，因此也成为向量（Vector）显示器、笔画（Stroke Writing）显示器。图形的组成线条由随机扫描系统按任意指定的顺序绘出并刷新。缺点是图片越复杂绘制越慢。
光栅扫描显示：光栅扫描显示器显示图形时，电子束依照固定的扫描线和规定的扫描顺序进行扫描。电子束先从荧光屏左上角开始，向右扫一条水平线，然后迅速地回扫到左边偏下一点的位置，再扫第二条水平线，照此固定的路径及顺序扫下去，直到最后一条水平线，即完成了整个屏幕的扫描。和图像复杂度无关。
现在基本上都是光栅扫描显示。光栅扫描显示组成结构如下：
高级光栅扫描显示系统结构.png
其工作流程大概是：CPU解码等操作之后将图片交给GPU进行渲染，渲染完成之后存入帧缓存区里，然后视频控制器读取帧缓存区信息（位图）交给显示器扫描显示。
屏幕卡顿产生的原因
撕裂：图片上半部分和下班部分不是同一帧绘制的，如下图：
图片撕裂
这个是如何形成的呢？
完美情况下：显示器每扫描完一张图片，再从帧缓存区读取下一张图片继续扫描，不断刷新、显示。
理想情况
但是图片渲染过程经过CPU和GPU的处理，而如果CPU和GPU流水线耗时过长，可能出现的情况是，当扫描完当前帧缓存区的图片之后，下一帧还未渲染完成，这时候显示器会继续扫描旧的图片，因为扫描过程是一行一行扫描的，而如果在旧的图片扫到一部分时发现下一帧新图片来了，然后显示器就会立即扫描下一帧的图片，此时就会出现上半部图片是上一帧的图片，下半部是新的一帧，导致图片看起来是撕裂的，也就是前面的图片显示的现象。
图片撕裂情况
出现撕裂的原因是前后两帧未同步的问题，如果在这过程中加上同步锁，那么就基本上能解决撕裂问题。以上我们是基于单缓存区来分析的？如果是改成双缓存区呢？其实从分析过程来看，单单使用双缓存区也是无法解决撕裂问题的。不管单缓存还是多缓存，解决撕裂问题可以通过加同步锁的方式解决。
加锁
iOS的卡顿问题
iOS采用的是垂直同步Vsync+双缓存区+同步锁的机制控制屏幕刷新。iOS 的显示系统是由 VSync 信号驱动的，VSync 信号由硬件时钟生成，每秒钟发出 60 次（这个值取决设备硬件）时钟信号，通知到 App 的刷新动画与显示。
iOS显示逻辑
双缓存相对单缓存的好处是可以更大限度利用CPU、GPU的空闲时间，以空间换取时间，提前将渲染好的图片缓存起来，减少屏幕卡顿现象。加上同步锁就是为了解决图片撕裂的问题。这么做看起来是比较完美了？但是它本质上并没有解决CPU、GPU处理图片耗时有可能过长的问题。当显示器扫描完当前的图片时，如果下一帧图片还未渲染完成，缓存区没有更新，那么显示器就会继续显示上一帧的图片，视觉就感觉屏幕没有变化，也就是所谓的卡顿的现象。实际上也就是常说的掉帧了。
总结：
iOS产生卡顿的原因：
1、CPU、GPU渲染流水线耗时过长；
2、垂直同步Vsync + 双缓存区以掉帧为代价解决了图片撕裂问题；
解决：
1、使用多缓存区，以空间换取时间，最大限制利用CPU和GPU的闲置时间。
2、提高CPU、GPU的性能和使用效率。
网友评论