五、从图形成像角度理解离屏渲染

1. 什么是离屏渲染

在普通的图形渲染的过程中，GPU会遍历图层树，一层一层的叠加渲染到帧缓冲区，每一层渲染完，都会丢弃掉，以减小开销。
但是如果有多个图层需要展示圆角阴影等特殊的效果，那么就不得不临时开辟出离屏渲染缓冲区，来保存这些渲染好的图层，当需要特殊处理的图层都渲染完后，再将这些图层进行统一的特殊效果处理，然后将处理后的结果发送到帧缓冲区。
图形图像显示到屏幕上的过程如下图所示 ：

图形图像显示流程.png

1.1 离屏渲染缓冲区的限制

• 时间限制： 100ms, 如果缓存超过100ms没被使用，将会被丢弃
• 空间限制：2.5倍屏幕像素大小，超过屏幕像素大小的2.5倍的地方会失效

1.2 离屏渲染存在的问题

由于离屏渲染缓冲区占用一定的资源，所以存在性能问题
开辟离屏渲染缓冲区、对图层进行特殊处理、从离屏渲染缓冲区到帧缓冲区都需要时间，所以可能会存在掉帧问题

1.3 离屏渲染的优势

如果某种效果需要多次显示，可以提前在离屏缓冲区渲染，设置 shouldRasterize（光栅化） = YES ，已达到复用的目的。

• 频繁变化的、没办法复用的layer，如动画， 不建议使用光栅化。
• 超出离屏渲染缓冲区的时间/空间限制的，不建议使用光栅化。

2. 常见的触发离屏渲染的情况:

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

3. 接下来探究 UIKit 中圆角裁剪是什么情况下会触发离屏渲染的。

剧透结果：不管是怎么样的布局情况， 满足这三个条件的（圆角 + 裁剪 + 至少有2个层实际参与图层处理），均会触发离屏渲染。

• 测试环境：
  Xcode: 11.3.1
  Mac OS: 10.15.3
  Simulator: iPhone 11 Pro

• 测试方法：模拟器离屏渲染颜色标记

  
  
  

  image.png

• 测试情况：

1. 只有自身1个layer时
2. 有subview时
3. 有sublayer时

3.1 只有自身1个layer时

结果先行： 圆角 + 裁剪 + 至少有2个层实际参与图层处理会触发离屏渲染
说明一下，这里的层不是指的CALayer对象, 而是其内部的层级（layer.backgroundColor | layer.border | layer.content），结构如下图所示：

layer 层级分解.png

接下来，我们逐一来看这个3个条件

• 1. 圆角会触发离屏渲染吗？
  下图中只设置了圆角，仔细看右侧的确是内容显示在了圆角区域，并未被裁剪掉，并且没有触发离屏渲染。
  由此我们可以确定只设置圆角是不会触发离屏渲染的。
  
  

  圆角 + 三个层.png

• 2. 圆角 + 裁剪会触发离屏渲染吗？
  下图中增加了裁剪，仔细看右侧的确是内容确实被裁剪掉了，但是并没有触发离屏渲染。因为只有一个内容层需要切圆角，不是多个图层都需要切圆角，所以不需要放到离屏缓冲区等待，直接切完圆角放进帧缓冲区就可以了。
  由此我们可以确定 圆角 + 裁剪不一定会触发离屏渲染。
  

  

  圆角 + 裁剪 + 1个层.png

• 3. 圆角 + 裁剪 + 2个层（背景色 + 边框）， 会触发离屏渲染吗？

官方文档中对于圆角的设置，是这样说明的：

设置layer.cornerRadius只会设置layer.backgroundColor及layer.border的圆角，默认情况下不会设置layer.content的圆角，除非设置了layer.maskToBounds = YES或者view.clipToBounds = YES。

从文档中，可以看出圆角默认是对边框及背景色生效的， 即不裁剪也是可以显示圆角的。下图的代码中的确没有触发离屏渲染。
由此我们可以确定圆角 + 裁剪 + 2个层（背景色 + 边框）不会触发离屏渲染

圆角 + 裁剪 + 2个层（背景色 + 边框）.png

• 4. 圆角 + 裁剪 + 至少有2个层且其中有一个是content层， 会触发离屏渲染吗？
  由此我们可以确定圆角 + 裁剪 + 至少有2个层且其中有一个是content层， 会触发离屏渲染
  
  

  圆角 + 裁剪 + 至少有2个层且其中有一个是content层.png

3.2 有subview时

结果先行： 圆角 + 裁剪 + 至少有2个层实际参与图层处理会触发离屏渲染
通过上面的描述，大家应该已经清楚的感知到了，参与处理的图层数量，是是否开启离屏渲染的关键。在含有子视图的情况下，父视图上设置了圆角和裁剪，所以其本身已经是一个参与处理的图层了，这时只要子视图中有一个1层参与了圆角裁剪，就会触发离屏渲染。
“参与处理”这个词其实很重要， 如果子视图比父视图小，裁剪时，裁不到它，它就不算参与， 就不会开启离屏渲染。可以参考以下代码：

子视图小于父视图，不会触发离屏渲染.png

子视图大于等于父视图，会触发离屏渲染.png

3.3 有sublayer时

结果先行： 圆角 + 裁剪 + 至少有2个层实际参与图层处理会触发离屏渲染

父layer + 子layer， 多层参与裁剪，触发离屏渲染.png

三、圆角优化方案

• 1. 从上文中，我们可以知道，多个视图或单一视图的多层实际参与到圆角裁剪中时，会触发离屏渲染。所以我们在切圆角时，可以根据业务需求，如果可以把实际参与裁剪的层由多层改为单层，便可避免离屏渲染。
     
     

     父视图圆角裁剪, 多层参与裁剪，触发离屏渲染.png
     
     
     

     子视图圆角裁剪，单层参与裁剪，未触发离屏渲染.png

• 2.如果无法改成单层裁剪，由 UI 出圆角的图，直接盖在视图上是最简单方便的解决方案。

• 3. 如果 UI 不配合出图，可以采用贝塞尔曲线画圆角，将要显示的效果直接生成一张图片，再交给 GPU 渲染， 就不会触发离屏渲染
     下面是 YYImage 的圆角处理方案

- (UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius
                                 corners:(UIRectCorner)corners
                             borderWidth:(CGFloat)borderWidth
                             borderColor:(UIColor *)borderColor
                          borderLineJoin:(CGLineJoin)borderLineJoin {
    
    if (corners != UIRectCornerAllCorners) {
        UIRectCorner tmp = 0;
        if (corners & UIRectCornerTopLeft) tmp |= UIRectCornerBottomLeft;
        if (corners & UIRectCornerTopRight) tmp |= UIRectCornerBottomRight;
        if (corners & UIRectCornerBottomLeft) tmp |= UIRectCornerTopLeft;
        if (corners & UIRectCornerBottomRight) tmp |= UIRectCornerTopRight;
        corners = tmp;
    }
    
    UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    CGContextScaleCTM(context, 1, -1);
    CGContextTranslateCTM(context, 0, -rect.size.height);
    
    CGFloat minSize = MIN(self.size.width, self.size.height);
    if (borderWidth < minSize / 2) {
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners cornerRadii:CGSizeMake(radius, borderWidth)];
        [path closePath];
        
        CGContextSaveGState(context);
        [path addClip];
        CGContextDrawImage(context, rect, self.CGImage);
        CGContextRestoreGState(context);
    }
    
    if (borderColor && borderWidth < minSize / 2 && borderWidth > 0) {
        CGFloat strokeInset = (floor(borderWidth * self.scale) + 0.5) / self.scale;
        CGRect strokeRect = CGRectInset(rect, strokeInset, strokeInset);
        CGFloat strokeRadius = radius > self.scale / 2 ? radius - self.scale / 2 : 0;
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:strokeRect byRoundingCorners:corners cornerRadii:CGSizeMake(strokeRadius, borderWidth)];
        [path closePath];
        
        path.lineWidth = borderWidth;
        path.lineJoinStyle = borderLineJoin;
        [borderColor setStroke];
        [path stroke];
    }
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}