iOS - 离屏渲染

1、定义

如果要在显示屏上显示内容，我们至少需要一块与屏幕像素数据量一样大的frame buffer（帧缓冲区），作为像素数据存储区域，然后由显示控制器把帧缓存区的数据显示到屏幕上。如果有时因为面临一些限制，一些原因，比如说阴影，遮罩mask等，GPU无法把渲染结果直接写入frame buffer，而是先暂把中间的一个临时状态存在另外的内存区域，之后再写入frame buffer，那么这个过程被称之为离屏渲染。
概况来说，即GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。
那为什么会产生离屏渲染呢？

图像渲染流程
正常情况下，App是通过CPU和GPU的合作，不停的将内容渲染完成放入FrameBuffer帧缓存区，而屏幕显示不断从FrameBuffer中获取内容，显示实时的内容。但在某些情况下，比如阴影，光栅化等效果下，GPU是没办法一次性扫描出图像并直接存放到frame buffer中，因为GPU采用的是画家算法，只能一层层的输出，因此当一层无法生成最终图片的时候，就需要额外开辟一块空间来存放临时图层直到最后合成后再存放到frame buffer中。这也就是GPU离屏渲染的原因。

其实在某些条件下，CPU也会触发离屏渲染，但这是一种特殊的离屏渲染。

我们知道，视图是存在calayer上的，而calayer提供了两中方式让我们进行操作，其中，当我们重写了drawRect函数时，其实是创建了一张新的画布CGContext来进行绘画操作，也就是一块新的缓存区域，这时候不是在framebuffer中，因此从定义上来说，这也是离屏渲染，但CPU并不擅长此道，CPU更多是用于计算，所以实际开发中我们要尽量避免才是。
而且根据苹果官方的说明，CPU渲染并非真正意义上的离屏渲染。如果你的view实现了drawRect，此时打开Xcode调试的“Color offscreen rendered yellow”开关，你会发现这片区域不会被标记为黄色，也就是xcode不认为是离屏渲染。

2、离屏渲染场景分析

2.1 光栅化

光栅化

光栅化是一种缓存机制，会触发离屏渲染。光栅化开启后会缓存这个图片的bitmap，如果对应的layer及其sublayers没有发生改变，下一次要显示这张图的时候，CPU会直接从缓存中获取bitmap，交给GPU进行显示，GPU就不需要去渲染图层了，从而能提高性能。因此，光栅化的主要应用场景在于layer不会变且图片是静态的情况下，才会有优化作用。
但是，光栅化仅能缓存100毫秒，而且只能存储屏幕大小2.5倍的数据，缓存空间十分有限，慎用！！！！。

2.2 遮罩mask

遮罩mask

遮罩mask会触发离屏渲染，主要原因在于多了一层CALyaer。
通过上面的代码可以发现，mask实际上就是添加了一层layer，它直接覆盖在了layer的上层。屏幕上的每一个像素点都是由当前像素点上多层的layer 通过GPU的混合计算所得，所以添加mask会增加GPU计算的复杂度，会导致无法通过一次遍历直接生成图像，就会触发离屏渲染。

2.3 阴影

阴影

阴影会触发离屏渲染。具体原因其实跟mask类似，也是因为layer。阴影的本质是在layer下层添加多一层，根据画家算法无法一次性生成，只能用离屏渲染的方式来进行图像生成。那该怎么优化呢？

当我们使用阴影的时候，可以采用贝塞尔曲线来给视图添加一个阴影路径，此时并不会触发离屏渲染。

阴影优化

通过对比，可以发现主要是showOffset这个属性引起的离屏渲染，那跟shadowPath有什么本质区别呢？其实showOffset是依赖于view这个本体的，而通过设置shadowPath，我们可以预先告诉GPU这个阴影的几何形状，因此不需要依赖于view，可以独立渲染，无需离屏渲染。

2.4 抗锯齿

抗锯齿

抗锯齿在满足一定条件下时，也是会触发离谱渲染的。这跟图片的显示模式有关。当contentMode 是 ScaleToFill 的时候，是不会触发离屏渲染的。因此在实际开发中要按实际的控件大小或者同比例来进行切图。

2.5 不透明

不透明

不透明在同时满足三个条件下，也会触发离屏渲染。

1. 当view上还有其它subview时
2. view 的 alpha 在 0 ~ 1 之间
3. view.layer.allowsGroupOpcity = Yes

具体原因在于重叠部分的图像需要两个view的图像合成来计算，因此只有满足上述三个条件时，才会触发。

2.6 圆角

圆角这里就得分两种情况了，一种UILabel，一种是其他视图

layer的组成
通过上图，我们可以发现layer有三个视觉元素组成，bgColor、contents、border。实际上切圆角的本质是切的contents。 圆角

圆角在同时满足两个条件下，也是会触发离屏渲染

1. 同时修改了contents + bgColor 或者 contents + border
2. clipsToBounds开启，同时contents上必须有值

那么回过头来，为什么把UILabel单独放一类

具体原因在于，普通的view 设置了 bgColor ，实际上是设置了view上layer 的bgColor，但是UILabel是设置在了layer的contents上，不能同时满足上述的两个条件。

所以该怎么优化呢？
正常UILabel设置圆角的可以直接使用，因为不会触发离屏渲染，但是其他的图像需要圆角的即可以使用贝塞尔曲线来实现，也可以直接用一个原型遮罩盖上去，虽然增加的图层，但还是比切圆角的消耗低，性能更好。

贝塞尔曲线圆角 圆形遮罩