离屏渲染的原理和分析

1.常见触发离屏渲染的情况

在分析离屏渲染的原因之前先介绍几种常见的触发离屏渲染的情况

1. 使⽤了 mask (遮罩) 的 layer (layer.mask)
2. 需要进⾏裁剪的 layer (layer.masksToBounds / view.clipsToBounds)
3. 设置了组透明度为 YES，并且透明度不为 1 的 layer (layer.allowsGroupOpacity/
   layer.opacity)
4. 添加了投影的 layer (layer.shadow*)
5. 采⽤了光栅化的 layer (layer.shouldRasterize)
6. 绘制了⽂字的 layer (UILabel, CATextLayer, Core Text 等)

2.测试代码并检测

检测离屏渲染的方法：打开模拟器的离屏渲染标记Debug-> Color Off-Screen Rendered，有黄色标记的就表示触发离屏渲染了。
1.按钮圆角裁剪

//1.按钮存在背景图片
    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100, 30, 100, 100);
    btn1.layer.cornerRadius = 50;
    [self.view addSubview:btn1];
    
    [btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    btn1.clipsToBounds = YES;
    
    //2.按钮不存在背景图片
    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(100, 180, 100, 100);
    btn2.layer.cornerRadius = 50;
    btn2.backgroundColor = [UIColor blueColor];
    [self.view addSubview:btn2];
    btn2.clipsToBounds = YES;

效果如下图

Simulator Screen Shot - iPhone 11 - 2020-07-08 at 16.16.04.png

当没有设置背景图片时，对按钮进行裁剪，不会进行离屏渲染，让按钮设置了背景图片再进行裁剪就会触发离屏渲染。
2.图片ImageView裁剪

//3.UIImageView 设置了图片+背景色;
    UIImageView *img1 = [[UIImageView alloc]init];
    img1.frame = CGRectMake(100, 120, 100, 100);
    img1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:img1];
    img1.layer.cornerRadius = 50;
    img1.layer.masksToBounds = YES;
    img1.image = [UIImage imageNamed:@"btn.png"];

    //4.UIImageView 只设置了图片,无背景色;
    UIImageView *img2 = [[UIImageView alloc]init];
    img2.frame = CGRectMake(100, 280, 100, 100);
    [self.view addSubview:img2];
    img2.layer.cornerRadius = 50;
    img2.layer.masksToBounds = YES;
    img2.image = [UIImage imageNamed:@"btn.png"];

效果如下：

Simulator Screen Shot - iPhone 11 - 2020-07-08 at 16.27.45.png

当ImageView没有设置背景色时即使进行裁剪也不会触发离屏渲染，当设置了背景色时再进行裁剪，就会触发离屏渲染。
有上面的检测结果可知裁剪不一定触发离屏渲染，要知道原因，先分析渲染流程

3.渲染流程

1.常规渲染流程

APP中的数据经过CPU和GPU的合作处理后，将要显示的数据存储到帧缓冲区（Frame Buffer），然后屏幕从帧缓冲区读取数据显示到屏幕上。
2.离屏渲染流程

有图可知，离屏渲染流程比常规的渲染流程多了一个离屏渲染缓冲区（Offscreen Buffer），需要额外开辟离屏缓冲区，将经过CPU和GPU合作处理的数据先存到离屏缓冲区，然后将多个离屏缓冲区的数据经过叠加处理之后再存到帧缓冲区（Frame Buffer），屏幕不断读取帧缓冲区的数据然后显示到屏幕上。
3.遮罩Mask的渲染逻辑

要得到图3，绿色按钮加遮罩，
1.先经过顶点着色器和片源着色器处理后获取到图1遮罩，放到离屏缓冲区
2.经过同样的流程获取到绿色方块，放到离屏缓冲区
3.从离屏缓冲区获取到遮罩和绿色方块，进行叠加在放到帧缓冲区，然后屏幕从帧缓冲区读取数据显示到屏幕上。

经过离屏渲染流程可知，当需要进行额外的渲染和合并时，才会开辟额外的离屏缓冲区进行离屏渲染。
离屏渲染性能问题：
1.因为离屏渲染需要开辟额外的空间，且离屏缓冲区有空间限制，是屏幕的2.5倍屏幕大小。
2.离屏缓冲区不能直接渲染到 屏幕上，需要先转存到帧缓冲区，所以需要耗费一定的时间。
所以离屏渲染可能造成掉帧。
使用离屏渲染的原因：
可以处理一些特殊的效果，这种效果并不能一次就完成，需要使用离屏缓冲区来保存中间状态，不得不使用离屏渲染，这种情况下的离屏渲染是系统自动触发的，例如经常使用的圆角、阴影、高斯模糊、光栅化等
可以提升渲染的效率，如果一个效果是多次实现的，可以提前渲染，保存到离屏缓冲区，以达到复用的目的。这种情况是需要开发者手动触发的。

离屏渲染的另一个原因：光栅化

When the value of this property is YES, the layer is rendered as a bitmap in its local coordinate space and then composited to the destination with any other content.
当我们开启光栅化时，会将layer渲染成位图保存在缓存中，这样在下次使用时，就可以直接复用，提高效率。
针对光栅化的使用，有以下几个建议：

如果layer不能被复用，则没有必要开启光栅化
如果layer不是静态，需要被频繁修改（例如动画过程中），此时开启光栅化反而影响效率
离屏渲染缓存内容有时间限制，如果100ms内没有被使用，那么就会丢弃，无法进行复用
离屏渲染的缓存空间有限，是屏幕的2.5倍，超过2.5倍屏幕像素大小的话也会失效，无法实现复用

4. 圆角触发离屏渲染的原因

要显示一个普通的图片时，这个图层其实包括了3层，backgroundColor，contents，和borderWidth&borderColo

4.1 layer.cornerRadius属性与离屏渲染的解读

由上面的cornerRadius官方文档知道，设置layer的cornerRadius只会对CALayer中的backgroundColor 和 boder设置圆角，不会设置contents的圆角，如果contents需要设置圆角，需要同时将maskToBounds / clipsToBounds设置为true。

所以当对图层设置圆角时，如果不将maskToBounds / clipsToBounds设置为true，圆角没有效果，是因为图层的contents没有进行进行裁剪。

5.离屏渲染的逻辑

不开启离屏渲染时：

1.油画算法：先绘制场景中的离观察者较远的物体，再绘制较近的物体。

如图是一个普通的图层由3个子图层构成，如果不进行裁剪，即不开启离屏渲染时
1.先绘制subLayer1绿色方块，先把subLayer1放到帧缓冲区，当subLayer1绘制到屏幕上后就会将subLayer1从帧缓冲区移除，从而节省空间。
2.然后绘制subLayer2树，将subLayer2放到帧缓冲区，当subLayer2绘制到屏幕上后将subLayer2从帧缓冲区移除。
3.经过同样的流程将subLayer3太阳绘制到屏幕。

开启离屏渲染时

如图，如果对上面的图进行圆角和裁剪，即开启了离屏渲染时
1.先绘制subLayer1（绿色方块），并将subLayer1放到离屏缓冲区
2.绘制subLayer2（树），并将subLayer2放到离屏缓冲区
3.绘制subLayer3（太阳），并将subLayer3放到离屏缓冲区
4.将subLayer1从离屏缓冲区取出进行圆角设置
5.将subLayer2从离屏缓冲区取出进行圆角设置
6.将subLayer3从离屏缓冲区取出进行圆角设置
7.将subLayer1，subLayer2，subLayer3进行组合然后放到帧缓冲区
8.屏幕从帧缓冲区读取数据渲染到屏幕上。

现在可以知道设置了背景图片的按钮和设置了背景色ImageVIew进行圆角裁剪时触发离屏渲染，而没有设置背景图片和没有背景色的ImageView进行圆角裁剪时没有触发离屏渲染的原因：
按钮1设置了背景图片，ImageView1设置了背景色后包含多个subLayer，如果进行裁剪需要额外开辟离屏缓冲区存储subLayer，然后进行裁剪圆角，然后把裁剪后的Layer叠加后放到帧缓冲区再显示到屏幕上。
当不进行裁剪时只需要从后往前绘制图层，绘制完后丢弃，当要进行裁剪时，需要离屏缓冲区存储，然后进行裁剪，触发离屏渲染。
背景色、边框、背景色+边框，再加上圆角+裁剪，根据文档说明，因为 contents = nil 没有需要裁剪处理的内容，所以masksToBounds设置为YES或者NO都没有影响。
一旦我们 为contents设置了内容 ，无论是图片、绘制内容、有图像信息的子视图等，再加上圆角+裁剪，就会触发离屏渲染。

离屏渲染只有当帧缓冲区一次性解决不了图形显示的时候，才会由系统自动触发
不是所有的圆角+maskToBounds都会触发离屏渲染。