浅谈离屏渲染

1.GPU屏幕渲染的两种方式

-On-Screen Rendering 当前屏幕渲染：指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行。
-Off-Screen Rendering 离屏渲染： 指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

2.什么是离屏渲染

相信许多iOS开发者，都听说过离屏渲染，大部分应该是面试的时候被问及。那么问题来了，什么是离屏渲染，原理又是什么哪
-什么是离屏渲染
先说一下画家算法
画家算法，又称深度排序法。

画家算法由远及近.png

我们先看看它的算法：
（1）将画布设成背景色，
（2）然后头脑简单的画家首先绘制距离较远的场景,然后用绘制距离较近的场景覆盖较远的部分。画家算法首先将场景中的多边形根据深度进行排序,然后按照顺序进行描绘。这种方法通常会将不可见的部分覆盖,这样就可以解决可见性问题。”

如上图，要在屏幕上显示图3的ImageView，通常GPU的Render Server会遵循 “画家算法” 按秩序先渲染图1的那一层，然后渲染图2的那一层，最后渲染图3，渲染好后的每一层都会存入帧缓存区，然后按照次序绘制到屏幕，当绘制完一层，就会将该层从帧缓存区中移除（以节省空间）
但是有时候有些特殊情况，例如对多图层的图片进行圆角显示的时候，一层一层渲染完成，进行圆角裁剪，当前已经渲染完成的图片帧缓存区的数据渲染完成丢弃或者被覆盖的时候 我们没有办法再去对图层进行裁剪，因此需要创建一个离屏缓存区来存储渲染完成的数据，等全部图层渲染到离屏缓存区之后，我们再取出来，进行裁剪操作，之后存在帧缓存区，等待屏幕控制器读取和操作。

比如 UIImageView 要圆角. 然后还有背景.
此时它就先把你里面的背景色图层渲染好,存到离屏缓存区;
然后再把图片渲染好, 存到离屏渲染缓存去.
最后在把这个2个存到离屏缓存区的图层进行圆角处理
然后再把结果放到帧缓存区
最后 显示

流程.png

3.离屏渲染的利弊

离屏渲染其实是加大了系统的负担，确实会造成性能上的损耗
1.离屏渲染需要开辟额外的存储控件，是当前屏幕的2.5倍，超过无效
2.从离屏缓冲区拷贝数据到帧缓冲区，上下文切换耗性能
有那么多弊端为什么还要用离屏渲染
多次出现在屏幕当中，可以提前渲染好，可以复用，减压CPU/GPU
还有一些特殊情况，不得不使用离屏渲染（使用额外的离屏缓冲区（offscreen butter)保存中间状态，最后叠加、处理后绘制在屏幕上，这样就不得不使用离屏渲染）

4.常见的几种离屏渲染的情况

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

-离屏渲染的另一个情况（光栅化）

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
如果shouldRasterize被设置成YES，在触发离屏绘制的同时，会将光栅化后的内容缓存起来，如果对应的layer及其sublayers没有发生改变，在下一帧的时候可以直接复用。这将在很大程度上提升渲染性能

5.layer.cornerRadius和clipsToBounds = YES一定会触发离屏渲染吗

开始代码测试前，我们先开启离屏渲染的检测，在模拟器打开color offscreen-rendered,开启后会把那些需要离屏渲染的图层高亮成黄色。

模拟器调试

上代码

UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(kScreenWidth/2-50, 120, 100, 100);
    btn1.layer.cornerRadius = 50;
    [self.view addSubview:btn1];

    [btn1 setImage:[UIImage imageNamed:@"test.png"] forState:UIControlStateNormal];
    btn1.clipsToBounds = YES;
    
    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(kScreenWidth/2-50, 260, 100, 100);
    btn2.layer.cornerRadius = 50;
    btn2.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:btn2];
    btn2.clipsToBounds = YES;
    
    UIImageView *image3 = [[UIImageView alloc]initWithFrame:CGRectMake(kScreenWidth/2-50, 400, 100, 100)];
    image3.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:image3];
    image3.image = [UIImage imageNamed:@"test.png"];
    image3.layer.cornerRadius = 50;
    image3.clipsToBounds = YES;
    
    UIImageView *image4 = [[UIImageView alloc]initWithFrame:CGRectMake(kScreenWidth/2-50, 540, 100, 100)];
    [self.view addSubview:image4];
    image4.layer.cornerRadius = 50;
    image4.clipsToBounds = YES;
    image4.image = [UIImage imageNamed:@"test.png"];

run一下看效果

模拟器iPhone11为例

我们创建了两个button 两个imageview 为什么1和3触发了离屏渲染 2和4没有触发
分析一下
按钮1和2 的区别就是一个是设置了背景图片，一个设置的是颜色，可以看出，离屏渲染触发的条件就是存在多组不同的layer需要渲染在一个视图上，而GPU无法一次性全部渲染时，需要保存离屏缓存区，等把这个2个存到离屏缓存区的图层进行圆角处理的时候才会触发。
imageview3和4的去区别就是一个设置了背景色一个没有，为啥3触发了离屏渲染，因为3里面包好了背景色，图片，圆角处理，渲染完背景色，再去渲染图片，再去圆角裁剪的时候，可能背景色已经被帧缓存区给移除了，所以需要触发离屏渲染，image4 直接渲染裁剪就可以显示
可能有人会提问了，为啥button1只设置了图片但是触发了离屏渲染，因为UIbutton有一个UIImageView属性，离屏渲染的触发两个条件，重组和渲染，按钮里面的imageview属性先去渲染图片 再去裁剪imageview 再去裁剪按钮 ，button的bg是layer，只有在重组，重新渲染才会离屏渲染。
-所以总结了一下并不是layer.cornerRadius和clipsToBounds = YES一定会触发离屏渲染吗，

6.iOS 常见的几种圆角处理方式