目录
- 1.屏幕显示图像的原理
- 2.卡顿产生的原因
- 3.卡顿优化
- 1.优化CPU
- 2.优化GPU
-
4.离屏渲染
- 1.GPU渲染算法 - 画家算法
- 2.离屏渲染的原因
- 3.离屏渲染的性能开销
- 4.避免离屏渲染
- 5.卡顿检测
https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/#2
一、屏幕显示图像的原理
显示器的电子枪从上到下一行行扫描，扫描完成后显示器就呈现一帧画面，随后电子枪回到初始位置继续下一次扫描。
-
当电子枪换到新的一行，准备进行扫描时，显示器会发出一个水平同步信号（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状态切换的耗时，以达到监控卡顿的目的。
网友评论