卡顿优化

一、屏幕显示图像的原理

显示器的电子枪从上到下一行行扫描，扫描完成后显示器就呈现一帧画面，随后电子枪回到初始位置继续下一次扫描。

当电子枪换到新的一行，准备进行扫描时，显示器会发出一个水平同步信号（horizonal synchronization），简称 HSync；
而当一帧画面绘制完成后，电子枪回复到原位，准备画下一帧前，显示器会发出一个垂直同步信号（vertical synchronization），简称 VSync。

显示器通常以固定频率进行刷新，这个刷新率就是 VSync 信号产生的频率。

通常来说，计算机系统中 CPU、GPU、显示器是以上面这种方式协同工作的：

CPU 计算好显示内容提交到 GPU；
GPU 渲染完成后将渲染结果放入帧缓冲区；
随后视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据，传递给显示器显示。

二、卡顿产生的原因

应用运行的帧率（fps）是60帧每秒，也就是要在16.7毫秒来完成到下一帧过渡的全部操作；这也是垂直同步信号（VSync）的频率。

如果在这段时间内，没有内容提交，则这一帧就会被丢弃，等待下一次机会再显示，而这是屏幕会保留之前的内容不变。这就是屏幕卡顿。

从上面的图中可以看到，CPU 和 GPU 不论哪个阻碍了显示流程，都会造成掉帧现象。所以开发时，也需要分别对 CPU 和 GPU 压力进行评估和优化。

三、卡顿优化 - CPU

1.优化CPU

对象创建、调整、销毁放到子线程中
预排版（布局计算、文本计算）
预渲染（文本图片等异步绘制）

2.优化GPU

尽量避免短时间内大量图片的显示，尽可能将多张图片合成一张进行显示。
图片不要过大。GPU能处理的最大纹理尺寸是4096x4096，一旦超过这个尺寸，就会占用CPU资源进行处理，所以纹理尽量不要超过这个尺寸。
尽量减少视图数量和层次。
尽量避免出现离屏渲染。

三、离屏渲染

1.GPU渲染算法 - 画家算法

要绘制一张多层次的图，按照人类的天性，一个最简单的解决方案就是先绘制最远的场景，之后从远及近，依次用近处的场景覆盖远处的场景。这就好比是一个画家画画一样。

而计算机图形学中的画家算法的思想便是如此：

首先将待渲染的场景中的多边形根据深度进行排序。
之后按照顺序进行绘制。

这种方法通常会将不可见的部分覆盖，这样就可以解决可见性问题。

2.离屏渲染的原因

GPU有两种渲染方式：

On-Screen Rendering：当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行。
Off-Screen Rendering：离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

使用离屏渲染的两种原因：

1.一些额外操作需要离屏缓存区来辅助实现

例如 cornerRadius + masksToBounds 设置圆角，需要在离屏缓冲区对这个视图下的所有图层都进行渲染和裁剪，然后将合并后的结果放入当前缓冲区。

2.作为缓存

例如 shouldRasterize 设置光栅化，会将图层渲染后的结果放入离屏缓冲区，以便后续操作使用。

3.离屏渲染的性能开销

1.创建新缓冲区

要想进行离屏渲染，首先要创建一个新的缓冲区。

2.上下文切换

离屏渲染的整个过程，需要多次切换上下文环境，先是从当前屏幕（On-Screen）切换到离屏（Off-Screen）；等到离屏渲染结束以后，将离屏缓冲区的渲染结果显示到屏幕上，又需要将上下文环境从离屏切换到当前屏幕。

4.避免离屏渲染

CALayer的大部分操作都会触发离屏渲染的操作，如：圆角、阴影、遮罩（mask）、光栅化。所以避免离屏渲染就是避免设置CALayer的属性，用别的方式来实现：

1.把要显示的图形在CPU这个阶段就转化为图形；
- 当我们需要圆角效果时，可以使用一张中间透明图片蒙上去；
- 当我们需要圆角效果时，使用代码手动生成圆角Image设置到要显示的View上，利用UIBezierPath画出来圆角图片；
2.让美工把图片切成圆角进行显示。

五、卡顿检测

平时所说的“卡顿”主要是因为在主线程执行了比较耗时的操作。

可以添加Observer到主线程RunLoop中，通过监听RunLoop状态切换的耗时，以达到监控卡顿的目的。

目录