iOS离屏渲染

开场白

---

本文简单介绍了iOS中离屏渲染的相关内容呢。

1.什么是离屏渲染：

---

要了解离屏渲染，咱们先简单了解一下非离屏渲染的逻辑

非离屏渲染

非离屏渲染也就是正常的渲染流程，简要流程如图：

APP将要渲染的信息提交给CPU，CPU经过必定的处理后提交给GPU。GPU不停的将内容渲染完成放到帧缓冲区中（FrameBuffer）。最后显示到屏幕上。

离屏渲染

离屏渲染简要流程如图：

与普通流程不一样的是，GPU把渲染好的的内容存放到离屏渲染缓冲区中，在离屏渲染缓冲区（OffscreenBuffer）中进一步作一些处理后，再提交到帧缓冲区（FrameBuffer）中。

2.离屏渲染对性能的影响？

---

• 和非离屏渲染模式相比多了进行额外的渲染合并，是对多个texture进行合并的过程。多了这么一步，因此说对性能要求更高一些。更容易出现掉帧的状况。
• 增长了额外的存储空间offscreen buffer，空间大小是屏幕的2.5倍

3.模拟器打开离屏渲染颜色标注

---

模拟器->Debug->Color Off-screen Rendered

开启后在模拟器界面中能看到使用离屏渲染的View了 图片中的例子是一个button，设置了一个背景色和背景图，对layer层设置cornerRadius和masksToBounds。

masksToBounds=YES，若是不设置是看不到效果的。下面会具体说明缘由。

4.为何要用离屏渲染？

---

使用离屏渲染大体有一下两种状况：

1. 能够显示一些特殊效果，须要用到Offscreen buffer来保存中间状态。
2. 若是texture会屡次显示到屏幕上，可使用offscreen buffer进行提早渲染，而且保存在其中，达到复用的效果。layer中有shouldRasterize属性

状况1：

通常都是系统去触发，例如对layer层相关处理：包括圆角、阴影、mask等等。iOS系统扁平化后出现的高斯模糊也是利用离屏渲染方式。

圆角处理

设置圆角为何会触发离屏渲染呢？这个要从layer的结构提及。 layer结构中包含3部分：

1. backgroundColor
2. contents
3. boarder相关信息（borderWidth和borderColor）

设置圆角代码，这个你们应该都知道：

view.layer.cornerRadius = 2
复制代码

咱们先看看官方文档中cornerRadius相关说明：

Discussion中的说明： 设置cornerRadius超过0.0，不会影响contents，可是会影响background color和border。若是设置了masksToBounds会对content进行裁剪。 因此说出发离屏渲染的主要缘由：

masksToBounds=YES;
复制代码

这就是上面模拟器开启离屏渲染模式中说明的为何要设置masksToBounds的缘由。masksToBounds须要对layer上的全部内容进行裁剪，过程当中须要对中间值进行保存。因此进行了离屏渲染操做。

注意： 若是说layer图层比较简单，也是不会触发离屏渲染的。例如：UIImageView设置cornerRadius和masksToBounds是不会触发离屏渲染的，若是再对UIImageView设置背景色，则会触发。

self.view.backgroundColor = [UIColor grayColor];
    
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
    imageView.frame = CGRectMake(100, 100, 100, 100);
    imageView.layer.cornerRadius = 30;
    imageView.layer.masksToBounds = YES;
    [self.view addSubview:imageView];
    
    UIImageView *imageView2 = [[UIImageView alloc]  initWithImage:[UIImage imageNamed:@"1"]];
    imageView2.backgroundColor = UIColor.redColor;
    imageView2.frame = CGRectMake(100, 250, 100, 100);
    imageView2.layer.cornerRadius = 30;
    imageView2.layer.masksToBounds = YES;
    [self.view addSubview:imageView2];
    
    UIButton *btn = [UIButton   buttonWithType:UIButtonTypeCustom];
    [btn setBackgroundImage:[UIImage imageNamed:@"1"]   forState:UIControlStateNormal];
    btn.layer.cornerRadius = 30;
    btn.layer.masksToBounds = YES;
    btn.frame = CGRectMake(100, 400, 100, 100);
    [self.view addSubview:btn];
复制代码

代码中有三个控件，前两个是UIImageView，最后一个是UIButton。

• 第一个UIImageView设置了图片没有设置背景色，没有触发离屏渲染。
• 第二个UIImageView设置了图片和背景色，触发了离屏渲染。
• 最后一个UIButton，设置图片没有设置背景色，触发了离屏渲染。缘由是咱们看到UIButton是由它的layer和UIImageView的layer混合起来的效果（UIButton有imageView），因此设置圆角的时候会触发离屏渲染。

状况2：

是一种主动行为，是为了提升复用的效率。一般是设置layer的shouldRasterize属性来实现。

shouldRasterize 光栅化

shouldRasterize官方文档

开启后，会将layer做为位图保存下来，下次直接与其余内容进行混合。这个保存的位置就是OffscreenBuffer中。这样下次须要再次渲染的时候，就能够直接拿来使用了。

shouldRasterize使用建议：

• layer不复用，不必使用shouldRasterize
• layer不是静态的，也就是说要频繁的进行修改，不必使用shouldRasterize
• 时间方面：离屏渲染缓存有100ms时间限制，超过该时间的内容会被丢弃，进而不能达到复用的目的
• 空间方面：离屏渲染空间是屏幕像素的2.5倍，若是超过也没法复用。

5.离屏渲染逻辑

---

图层的叠加绘制大体遵循“画家算法”，也就是由远到近的方式将图层绘制到屏幕上，绘制近距离图层会有覆盖远图层的逻辑。

普通渲染方式，绘制完一层图层后，直接舍弃掉。紧接着绘制稍近的图层。以此类推：

而咱们进行离屏渲染方式（圆角、剪裁等操做）时，每层图层绘制完不会立刻删除，而是先保存在离屏缓存区中，等图层绘制完成后，再依次进行特殊处理（圆角、剪裁等操做）。

注意：一般会触发离屏渲染，除了圆角、剪裁外，还有设置了透明度+组透明（layer.allowsGroupOpacity+layer.opacity），阴影属性（shadowOffset 等）都会产生相似的效果，由于组透明度、阴影都是和裁剪相似的，会做用与 layer 以及其全部 sublayer 上，这就致使必然会引发离屏渲染。

6.避免圆角离屏渲染

---

为了不设置圆角时引发的离屏渲染操做，能够用一下方案代替直接设置圆角的操做

• 直接更换支援，让UI提供带圆角的图片。
• 使用layer.mask属性，增长一个和背景色相同的遮罩覆盖上层，盖住四个角，营造出圆角的形状。但这种方式难以解决背景色为图片或渐变色的状况。
• 使用贝塞尔曲线绘制闭合圆角的矩形，在上下文中设置只有内部可见，再将不带圆角的 layer 渲染成图片，添加到贝塞尔矩形中。这种方法效率更高，可是 layer 的布局一旦改变，贝塞尔曲线都须要手动地从新绘制，因此须要对 frame、color 等进行手动地监听并重绘。
• CoreGraphics重写 drawRect:，用 CoreGraphics 相关方法，在须要应用圆角时进行手动绘制。不过 CoreGraphics 效率也颇有限，若是须要屡次调用也会有效率问题。

7.触发离屏渲染缘由的总结

---

1. 设置layer.mashsToBounds/view.clipsToBounds
2. 设置layer.mask
3. 设置layer.shadow等相关属性
4. 设置layer.shouldRasterize光栅化
5. 设置了组透明度为 YES，而且透明度不为 1 的 layer (layer.allowsGroupOpacity/layer.opacity)
6. 绘制了文字的 layer (UILabel, CATextLayer, Core Text 等)

8.参考文章

---

iOS 渲染原理解析