iOS离屏渲染探索

在介绍离屏渲染之前，我们先简单描述一下图形渲染。

图形渲染

我们都知道现在的计算机除了有cpu外，还有一个GPU芯片。那么这两个芯片的作用是啥？
CPU：现在计算机整个系统的运算核心、控制核心。
GPU：可进行绘图运算工作的专用微处理器，是连接计算和显示终端的纽带；GPU主要是用来处理图像信息的功能，被称为图形处理器。

屏幕成像的方式有很多种类型：
1、随机扫描显示：通过光束扫描图像信息。
2、光栅扫描显示：

简单光栅扫描显示系统结构：

15940864335655.png

常用光栅扫描显示系统结构

15940864797887.png

高级光栅扫描显示系统结构

3、屏幕扫描

15940865350393.png

图像显示大致过程：CPU/GPU处理->存放到帧缓冲区->视频控制器去帧缓冲区读取->其他一系列处理->显示器展示（光栅扫描）

有时候会出现屏幕撕裂的情况，那是由于下一帧的图像渲染没有完成，扫描的还是上一帧的图像数据，因此会发生屏幕撕裂的情况。

图像渲染流程：

15940874416177.png

着色器渲染流程：

在渲染过程中，必须是2种着色器，分别是顶点着色器、片元着色器。顶点着色器是第一个着色器，片元着色器是最后一个。顶点着色器处理顶点数据，片元着色器处理像素点颜色。类似于渲染一个正方形，四个顶点由顶点着色器处理，其余的内容分成很多个像素点，由片元着色器处理。

ios下的渲染框架

15940879847910.png

ios下的CoreAnimation：本质上可以理解为一个复合引擎，主要职责包含：渲染、构建和实现动画。

CoreAnimation渲染流水线：

v2-98077db5cb31318ec437f00762870142_r.jpg

离屏渲染（Offscreen rendering）探索

如何检测项目中哪些图层触发了离屏渲染问题：

15940887764593.png

ng)

离屏渲染定义：

在通常情况下，我们在屏幕上显示都是读取帧缓冲区（Frame Buffer）渲染好的的数据，然后显示在屏幕上；而离屏渲染，则是将渲染好的图像放入离屏缓冲区（OffScreen Buffer）等多个图层的数据渲染完，再组合在一起，放入帧缓冲区，然后在屏幕上显示。

离屏渲染的存在的问题：

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

离屏渲染触发的几种情况：

1、使用了mask的layer。
2、需要进行裁剪的layer
3、设置了组透明为yes，并且透明度不为1的layer。
4、添加了投影的layer
5、采用了shouldRasterize光栅化
6、绘制了文字的layer

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

那么我们怎么判断离屏渲染是否会触发呢？
我们来探索一下：

  //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;
    
    //3.UIImageView 设置了图片+背景色;
    UIImageView *img1 = [[UIImageView alloc]init];
    img1.frame = CGRectMake(100, 320, 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, 480, 100, 100);
    [self.view addSubview:img2];
    img2.layer.cornerRadius = 50;
    img2.layer.masksToBounds = YES;
    img2.image = [UIImage imageNamed:@"btn.png"];

Simulator Screen Shot - iPhone SE -2nd generation- - 2020-07-07 at 11.19.13.png

在上面的代码中，创建了两个button，两个imageView，那么为什么1，3会触发离屏渲染，2，4却不会触发离屏渲染呢？

我们分析一下代码：
在两个button按钮当中，第一个与第二个的区别在于一个设置了图片，一个设置了背景颜色，然后共同设置了圆角，mask。从这个结果可以看出，离屏渲染触发的条件就是存在多组不同的layer需要渲染在一个视图上，而GPU无法一次性全部渲染时，才会触发。

在两个imageView中，同样的设置了圆角，mask，图片，和一个有背景色，一个无背景色。有背景颜色的触发了离屏渲染，没有的没触发。
我的理解是：img1中，有背景颜色，图片，圆角，需要将背景颜色，图片都进行裁剪，存在多层图像的加载，因此就会触发离屏渲染。在img2中，只有图片需要裁剪，只存在单层内容需要加载，因此不会触发离屏渲染。

你或许会有疑问？为啥UIButton也只是设置图片，圆角，mask，为什么它就可以触发离屏渲染？其实在UIButton中会有一个UIImageView属性，对UIButton裁剪，则会触发离屏渲染。

15940942356862.png

注意事项：给图层设置layer.cornerRadius只会设置backgroundColor和border的圆角，不会设置content的圆角，除非你同时设置了layer.masksToBounds为YES，才会对content设置圆角属性。

离屏渲染原理：

在我们渲染一组layer时，若不使用离屏渲染，则会出现第一个layer渲染完后，存入帧缓冲区，然后显示在屏幕上，到第二个layer渲染完后，存入帧缓冲区，再显示再屏幕上，第一个layer就会消失，从而出现问题。
那么使用离屏渲染，系统会将每个layer渲染完的结果存放到离屏缓冲区（OffScreen Buffer），最后将这些layer存入帧缓冲区，进而显示到屏幕上，这样就能完整的显示整个图像。