iOS 离屏渲染

2020-07-09 本文已影响0人希尔罗斯沃德_董

什么是离屏渲染

正常情况下，在当前屏幕显示的内容，由 GPU 渲染完成后放到当前屏幕的帧缓存区，不需要额外的渲染空间。iOS的屏幕刷新率是 60Hz，也就是刷新一帧的时间是 16.67 ms，每隔这段时间视频控制器就会去读一次缓存区的内容来显示。

正常渲染.png

而离屏渲染（offscreen-rendering）顾名思义为屏幕外的渲染，即渲染的结果不会直接呈现到当前屏幕上，而是等待合适的时机才会被显示。

离屏渲染.png

如何查看是否触发了离屏渲染

步骤：打开模拟器 => debug => Color Off-screen Rendered

离屏渲染示例

图中第一个和第三个按钮出现黄色背景，说明是触发了离屏渲染。

产生离屏渲染有两个原因：

1、当多个图层需要额外渲染和合并的时候，不能直接渲染到FrameBuffer，需要借助offscreen buffer 暂存各个图层渲染结果，等各个图层渲染完成之后再进行合并到FrameBuffer供屏幕显示；

2、当我们使用CALayer的属性shouldRestrize（光栅化）并设置为YES时，就会触发离屏渲染。以下是官方解释：

Declaration

@property BOOL shouldRasterize;
Discussion

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 (光栅化)使用建议
1、如果layer没有被复用，则没必要打开光栅化；
2、如果layer是动态的，需要频繁修改，比如处在动画中，那么开启离屏渲染会影响效率；
3、离屏渲染缓存时间有限，超过100ms不被使用则会被丢弃，无法复用；
4、离屏渲染缓存空间有限，最大不能超过屏幕像素的2.5倍，否则无效；

离屏渲染有哪些问题

1、额外存储空间，增加内存开销；
2、OffscreenBuffer 拷贝到FrameBuffer过程需要时间，影响性能；
3、OffscreenBuffer空间有限制限制，最多能缓存屏幕像素的2.5倍；

离屏渲染存在的意义

离屏渲染会给我们带来性能问题，为什么还要用呢？离屏渲染是系统触发，使用离屏渲染主要是以下原因：
1、无法一次性绘制，需要额外缓存中间状态，合成完成之后再进行渲染；
2、OffscreenBuffer可以复用，在需要重复展示的地方可以达到复用的目的，提高效率。

圆角触发的离屏渲染

设置圆角都会触发离屏渲染吗？

通常如果设置 layer 的 cornerRadius + masksToBounds(对应的UIView的clipsToBounds属性) 会触发离屏渲染, layer.cornerRadius只会设置backgroundColor和border的圆角，不会设置layer.contents的圆角，因此不会触发离屏渲染，除非同时设置了layer的masksToBounds为YES。但是，只要设置这几个属性就会触发离屏渲染吗？通过以下代码我们来试一下：

    UIView *imageView = [[UIView alloc]init];
    imageView.frame = CGRectMake(100, 480, 100, 100);
    [self.view addSubview:imageView];
    imageView.layer.cornerRadius = 50;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [UIColor redColor].CGColor;
    imageView.backgroundColor = [UIColor greenColor];
    imageView.layer.borderWidth = 10;

接下来检查一下发现没有触发离屏渲染：

无离屏渲染

前面提到过masksToBounds是设置layer.contents的圆角的。但从上面的代码来看我们并没有设置contents，因此contents为空，masksToBounds设置是无效的。接下来我们设置一下contents的值试一下：

    UIView *imageView = [[UIView alloc]init];
    imageView.frame = CGRectMake(100, 480, 200, 200);
    [self.view addSubview:imageView];
    imageView.layer.cornerRadius = 100;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [UIColor redColor].CGColor;
    imageView.backgroundColor = [UIColor greenColor];
    imageView.layer.borderWidth = 10;
    imageView.layer.contents = (__bridge id)[UIImage imageNamed:@"btn.png"].CGImage;

这时候在查看，确实是触发了离屏渲染：

离屏渲染

为什么设置圆角会触发离屏渲染呢？

由下面这张图分析一下圆角触发的离屏渲染的原因：

屏幕快照 2020-07-10 下午4.32.22.png

cornerRadius + masksToBounds 会涉及到三个图层设置圆角并合并的情况。如果不设置圆角的话，那么在渲染的时候他只需要从远到近一个个渲染直接绘制到屏幕上就可以了。但这里因为设置了圆角，那么就涉及到裁剪的问题，子layer要根据父layer的大小进行裁剪，但是由于子layer和父layer不是同时进行渲染的，所以这时候系统就需要开辟额外的缓存区OffscreenBuffer 先暂时吧父layer渲染的结果缓存起来，等子layer渲染完成之后再从OffscreenBuffer 把父layer从OffscreenBuffer取出进行合并然后丢到帧缓存区等待屏幕显示。这就是设置圆角会触发离屏渲染的原因。这根前面提到的触发离屏渲染的原因1是一样的。
根据这个原理，其实不设置contents的值，而是在当前这个视图上加一个带颜色的子视图，也会触发离屏渲染：

    UIView *imageView = [[UIView alloc]init];
    imageView.frame = CGRectMake(100, 480, 200, 200);
    [self.view addSubview:imageView];
    imageView.layer.cornerRadius = 100;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [UIColor redColor].CGColor;
    imageView.backgroundColor = [UIColor greenColor];
    imageView.layer.borderWidth = 10;
    UIView *view1 = [[UIView alloc]init];
    view1.frame = CGRectMake(50, 50, 40, 40);
    view1.backgroundColor = [UIColor blueColor];
    [imageView addSubview:view1];

注：这里面要说的是圆角设置的几个图层中父layer和自子layer必须有色值，否则也不会触发离屏渲染，因为不需要合成。比如以下情况就不会触发离屏渲染：

  //不会触发离屏渲染
    UIView *imageView = [[UIView alloc]init];
    imageView.frame = CGRectMake(100, 480, 200, 200);
    [self.view addSubview:imageView];
    imageView.layer.cornerRadius = 100;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [UIColor redColor].CGColor;
    imageView.backgroundColor = [UIColor greenColor];
    imageView.layer.borderWidth = 10;
    UIView *view1 = [[UIView alloc]init];
    view1.frame = CGRectMake(50, 50, 40, 40);
    view1.backgroundColor = [UIColor clearColor];
    [imageView addSubview:view1];

或者：

//不会触发离屏渲染
    UIView *imageView = [[UIView alloc]init];
    imageView.frame = CGRectMake(100, 480, 200, 200);
    [self.view addSubview:imageView];
    imageView.layer.cornerRadius = 100;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [UIColor clearColor].CGColor;
    imageView.backgroundColor = [UIColor clearColor];
    imageView.layer.borderWidth = 10;
    UIView *view1 = [[UIView alloc]init];
    view1.frame = CGRectMake(50, 50, 40, 40);
    view1.backgroundColor = [UIColor greenColor];
    [imageView addSubview:view1];

圆角处理避免离屏渲染的替代方案

离屏渲染会带来一定的性能问题，所以有时候我们要尽量避免，以下是几个避免离屏渲染的方案：
1、贝塞尔曲线UIBezierPath；
2、直接切一个带有圆角的图片；
3、另外还可以参考YYImage的方案等等。

常⻅触发离屏渲染的几种情况

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