一、开启图层是否触发离屏渲染问题

注：离屏渲染的图层会标记为黄色

开启离屏渲染检测.png

二、离屏渲染的渲染流程

普通加载流程.png

离屏渲染流程.png

三、离屏渲染触发的原因

第一个原因：App进行额外的渲染和合并（复杂图层会自动离屏渲染）

App 进行额外的渲染和合并，这时必须要用 offscreen Buffer(离屏缓存区) 来进行组合，把组合结果放在 FrameBuffer（帧缓存区），然后显示在屏幕上

1.1 什么情况下圆角会触发离屏渲染

当显示三层，边框、内存、背影颜色，三个进行叠加时再加圆角会触发离屏渲染

只设置 layer.cornerRadius ，只会设置 backgroundColor 和 border 的是圆角，不会设置 content（内容）的圆角，除非同时设置了 layer.masksToBounds 为 Ture （对应 view 中的 clipsToBounds 属性）才会对内容进行圆角。

1.2 毛玻璃会触发离屏渲染，毛玻璃触发离屏渲染是怎么做的？

1，拿到源图，2，缩放，3，平行模糊，4垂直模糊，之后将4个图层从离屏渲染中拿出来，合并得到最终的模糊效果，存在帧缓冲中
前面的4个结果，存在于离屏缓冲区，再进行合成。

第二个原因：光栅化（手动离屏渲染）

启用 shouldRasterize 光栅化时，就会进行复用，如果图层想要进行复用，可以做复用功能，开启光栅化。

什么情况下使用光栅化，光栅化(shouldRasterize ) 使用建议

1.如果 layer 不能被复用，则没有必要打开光栅化。
2.如果 layer 不是静态的，需要被频繁修改，比如处于动画之中。那么开启离屏渲染反而影响效率。
3.离屏渲染缓存内容有时间限制，缓存内容 100ms 内容如果没有被使用，那么它就会丢弃。无法再进行复用了。
4.离屏渲染缓存空间有限，超过 2.5 倍屏幕像素大小的话，也会失效，且无法进行复用。

四、渲染的原理

图层遮罩Mask ，使用 Mask 时会触发离屏渲染
第一步: 从App提交到 Core Animation （Render Server） -> Vertex Shader（顶点着色器，确定显示位置）-> 触发 Render渲染缓冲区 Pixel Shader(片元着色器，) -> 获得一个 Mask Texture （遮罩）【不能直接显示在帧缓冲区，需要暂时存放在中间缓冲区 offscreen Buffer 】
第二步与第一步相同获得第二个 Mask Texture 存在离屏缓冲区
第三步：从两个离屏渲染缓冲区中拿到数据，然后合并放在帧缓冲区

五、离屏渲染的绘制逻辑：

油画算法：先绘制远的图层，再绘制中间图层，再绘制近的图层，依次绘制

普通绘制逻辑.png

离屏渲染绘制逻辑.png

六、离屏渲染的性能

离屏渲染有性能问题？两点

1.离屏渲染需要额外的存储空间，大量离屏渲染会造成内存压力（Offscreen Buffer 空间是有限制的，是屏幕的2.5倍）
2.把结果从offscreen Buffer 转存在 FrameBuffer也需要时间

离屏渲染会造成性能问题，为什么还要用？

1.因为非常多的特殊效果，并不能够一次性用一个图层就能画出来(不能一次性得到结果)，需要使用额外的offscreenBuffer 保存中间状态，这时不得不使用离屏渲染[系统自动触发，圆角阴影]
2.效率的优势：既然效果会多次出现在屏幕上，我们可以提前渲染好，保存在offscreenBuffer,从而达到复用目的。[手动触发]

七、常见触发离屏渲染的几种情况：

使用了 mask 的 layer (layer.mask)
需要进行裁剪的 layer (layer.masksToBounds / view.clipsToBounds)
设置了组透明度为 YES，并且透明度不为 1 的 layer (layer.allowsGroupOpacity/ layer.opacity)
添加了投影的 layer (layer.shadow*)
采用了光栅化的 layer (layer.shouldRasterize)
绘制了文字的 layer (UITextLabel, CATextLayer, Core Text 等)

八、案例：

触发离屏渲染案例.png

背景色+图片+边框 -> 不会触发离屏渲染

//     背景色+图片+边框 -> 不会触发离屏渲染
    UIView *view1 = [[UIView alloc] init];
    view1.frame = CGRectMake(50, 50, 100, 100);
    [self.view addSubview:view1];
    view1.backgroundColor = [UIColor grayColor];
    view1.layer.borderColor = [UIColor redColor].CGColor;
    view1.layer.borderWidth = 5;
    CALayer *imgLayer1 = [CALayer layer];
    imgLayer1.frame = CGRectMake(10, 10, 80, 80);
    imgLayer1.contents = (__bridge id)[UIImage imageNamed:@"btn.png"].CGImage;
    [view1.layer addSublayer:imgLayer1];

2.背景色+图片+边框+圆角 -> 不会触发离屏渲染

    // 背景色+图片+边框+圆角 -> 不会触发离屏渲染
    UIView *view2 = [[UIView alloc] init];
    view2.frame = CGRectMake(250, 50, 100, 100);
    [self.view addSubview:view2];
    view2.backgroundColor = [UIColor grayColor];
    view2.layer.borderColor = [UIColor redColor].CGColor;
    view2.layer.borderWidth = 5;
    CALayer *imgLayer2 = [CALayer layer];
    imgLayer2.frame = CGRectMake(10, 10, 80, 80);
    imgLayer2.contents = (__bridge id)[UIImage imageNamed:@"btn.png"].CGImage;
    [view2.layer addSublayer:imgLayer2];
    view2.layer.cornerRadius = 50;

3.背景色+图片+边框+圆角+裁剪mask -> 会触发离屏渲染

    // 背景色+图片+边框+圆角+裁剪mask -> 会触发离屏渲染
    UIView *view3 = [[UIView alloc] init];
    view3.frame = CGRectMake(50, 200, 100, 100);
    [self.view addSubview:view3];
    view3.backgroundColor = [UIColor grayColor];
    view3.layer.borderColor = [UIColor redColor].CGColor;
    view3.layer.borderWidth = 5;
    CALayer *imgLayer3 = [CALayer layer];
    imgLayer3.frame = CGRectMake(10, 10, 80, 80);
    imgLayer3.contents = (__bridge id)[UIImage imageNamed:@"btn.png"].CGImage;
    [view3.layer addSublayer:imgLayer3];
    view3.layer.cornerRadius = 50;
    view3.layer.masksToBounds = YES;

4.设置了组透明度为YES -> 会触发离屏渲染

//    设置了组透明度为YES -> 会触发离屏渲染
    UIView *view4 = [[UIView alloc] init];
    view4.frame = CGRectMake(250, 200, 100, 100);
    [self.view addSubview:view4];
    view4.layer.contents = (__bridge id)[UIImage imageNamed:@"btn.png"].CGImage;
    view4.layer.shouldRasterize = YES;// 组透明

5.添加了投影的layer -> 会触发离屏渲染

//    添加了投影的layer -> 会触发离屏渲染
    UIView *view5 = [[UIView alloc] init];
    view5.frame = CGRectMake(50, 340, 100, 100);
    [self.view addSubview:view5];
    view5.layer.contents = (__bridge id)[UIImage imageNamed:@"btn.png"].CGImage;
    view5.layer.shadowColor = [UIColor blackColor].CGColor;//shadowColor阴影颜色
    view5.layer.shadowOffset = CGSizeMake(2,6);//shadowOffset阴影偏移
     view5.layer.shadowOpacity = 0.7;//阴影透明度，默认0

6.UITextView绘制文字+圆角+mask -> 会触发离屏渲染

//    UITextView绘制文字+圆角+mask -> 会触发离屏渲染
    UITextView *textLabel = [[UITextView alloc] initWithFrame:CGRectMake(250, 340, 100, 100)];
    [self.view addSubview:textLabel];
    textLabel.text = @"    UITextView\n    文字内容";
    textLabel.layer.cornerRadius = 50;
    textLabel.layer.masksToBounds = YES;

UILabel绘制文字+背景色+圆角+mask -> 不会触发离屏渲染

    // UILabel绘制文字+背景色+圆角+mask -> 不会触发离屏渲染
    UILabel *txtLabel = [[UILabel alloc] initWithFrame:CGRectMake(50, 500, 100, 100)];
    [self.view addSubview:txtLabel];
    txtLabel.text = @"    UILabel\n    文字内容";
    txtLabel.numberOfLines = 2;
    txtLabel.backgroundColor = [UIColor redColor];
    txtLabel.layer.cornerRadius = 50;
    txtLabel.layer.masksToBounds = YES;

121.png

四、iOS离屏渲染