一、离屏渲染的由来

GPU渲染的过程中，一般情况会遵循‘画家算法’按次序由远及近的一层一层将结果放置到帧缓存区中，当当前帧缓存区的数据显示到屏幕上之后，帧缓存区就会将该帧丢弃，周而复始。

当图层一层层渲染完，此时如果我们需要对图层进行一些操作例如裁剪，之前放置在帧缓存区的数据早已经被丢弃或者说是被覆盖了，这个时候也就不可能对所有图层做这些操作了。

我们需要开辟一些离屏缓存区来存放一些中间状态的数据，等待全部的图层都渲染到离屏缓存区之后，分别从各个离屏缓存区取出数据，分别做相应的操作(裁剪等)之后，组合存入帧缓存区，再等待屏幕控制器的读取和屏幕刷新

正常渲染流程：

GPU进⾏渲染->存放在帧缓存区⾥ ->视频控制器读取帧缓存区信息(位图) -> 数模转化(数字信号处->模拟型号) ->(逐⾏扫描)显示

图片来自网络

离屏渲染流程

app进⾏额外的渲染和合并-> offscreen Buffer 组合. -> FrameBuffer(帧缓冲区) ->显示

图片来自网络

二、离屏渲染的存在的问题：

1、offScreenBuffer空间大小有限制，为屏幕像素点的2.5倍。
2、容易掉帧，产生性能问题。
3、渲染需要时间，会产生性能问题。

三、常见的几种触发离屏渲染方式

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 等)

在使用光栅化的时候，有以下建议:

如果layer不能被重用，则没必要使用光栅化；
如果我们更新已光栅化的layer,会造成大量的离屏渲染。例如UITableViewCell因为复用的原因，重绘是很频繁的。如果此时设置了光栅化，反而会造成大量离屏渲染，降低性能；
离屏渲染的缓存是有时间限制的，100ms内如果缓存的内容没有被复用，则会被丢弃，也就无法复用了；
离屏渲染的空间有限，超过2.5倍屏幕像素的大小，离屏渲染也会失效，无法复用

四、案例分析

案例分析前，讲下CALayer的构成，如图所示，它是由backgroundColor、contents、borderWidth&borderColor构成的。它跟案例中圆角触发离屏渲染息息相关

CALayer结构图

圆角设置不生效

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置背景色
view1.backgroundColor = UIColor.redColor;
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
[self.view addSubview:view1];

运行结果

我们会发现圆角并没有设置成功，当然绝大部分iOS开发都知道怎么处理，但很少有人知道原理

苹果官方文档关于圆角的说明

官方文档告诉我们，设置cornerRadius只会对CALayer中的backgroundColor和boder设置圆角，不会设置contents的圆角，如果contents需要设置圆角，需要同时将maskToBounds / clipsToBounds设置为true。

所以我们可以理解为圆角不生效的根本原因是没有对contents设置圆角，而按钮设置的image是放在contents里面的，所以看到的界面上的就是image没有进行圆角裁剪。

我们通过代码来看下什么情况下会触发离屏渲染

先开启离屏渲染颜色标记

开启离屏渲染颜色标记

例1 设置uiview图片+cornerRadius

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
view1.clipsToBounds = YES;
[self.view addSubview:view1];

例1 运行结果

从结果来看，不会触发离屏渲染

例2 设置uiview背景颜色+图片+cornerRadius

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置背景色
view1.backgroundColor = UIColor.redColor;
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
view1.clipsToBounds = YES;
[self.view addSubview:view1];

例2 运行结果

从结果来看，触发了离屏渲染

例3 设置imageView设置了图片+背景色+cornerRadius

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
    // 设置背景色
//    view1.backgroundColor = UIColor.redColor;
    // 设置圆角
    view1.layer.cornerRadius = 50.0;
    //设置图片
//    view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
    view1.clipsToBounds = YES;
    
    [self.view addSubview:view1];

    // 子视图
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100.0, 100.0)];
    // 下面3个任何一个属性
    // 设置背景色
//    view2.backgroundColor = UIColor.blueColor;
    // 设置内容
    view2.layer.contents = (__bridge id)([UIImage imageNamed:@"btn"].CGImage);
    [view1 addSubview:view2];

例3 运行结果

从结果来看，触发了离屏渲染
经过各种测试，我们为视图添加一个有颜色、内容或边框等有图像信息的子视图也会触发离屏渲染。

例4 按钮设置背景图片+cornerRadius

    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100,50,100,100);
    btn1.layer.cornerRadius = 50;
    [self.view addSubview:btn1];
    [btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    
    btn1.clipsToBounds=YES;

例4 运行结果

从结果看，触发了离屏渲染

例5 按钮设置背景颜色+cornerRadius

    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame=CGRectMake(100,200,100,100);
    btn2.layer.cornerRadius = 50;
    btn2.backgroundColor = [UIColor blueColor];
    [self.view addSubview:btn2];

    btn2.clipsToBounds=YES;

例5 运行结果

从结果看，没有触发离屏渲染

总结

当只有一个layer时，想要触发触发离屏渲染，必须backgroundColor + contents + cornerRadius + maskToBounds / clipsToBounds(YES) 必须都设置
当有多个layer时，想要触发离屏渲染，设置backgroundColor / contents + cornerRadius + maskToBounds / clipsToBounds(YES)；
uibutton比较特殊，想要触发离屏渲染，设置contents + cornerRadius + maskToBounds / clipsToBounds(YES)；

iOS离屏渲染探索