1. 什么是离屏渲染

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

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
  • 测试方法:模拟器离屏渲染颜色标记
    五、从图形成像角度理解离屏渲染 - 图2
  • 测试情况:
  1. 只有自身1个layer时
  2. 有subview时
  3. 有sublayer时

3.1 只有自身1个layer时

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

五、从图形成像角度理解离屏渲染 - 图3
接下来,我们逐一来看这个3个条件

  • 1. 圆角会触发离屏渲染吗?
    下图中只设置了圆角,仔细看右侧的确是内容显示在了圆角区域,并未被裁剪掉,并且没有触发离屏渲染。
    由此我们可以确定只设置圆角是不会触发离屏渲染的。
    五、从图形成像角度理解离屏渲染 - 图4

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

  • 3. 圆角 + 裁剪 + 2个层(背景色 + 边框), 会触发离屏渲染吗?

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

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

从文档中,可以看出圆角默认是对边框及背景色生效的, 即不裁剪也是可以显示圆角的。下图的代码中的确没有触发离屏渲染。
由此我们可以确定圆角 + 裁剪 + 2个层(背景色 + 边框)不会触发离屏渲染
五、从图形成像角度理解离屏渲染 - 图6

  • 4. 圆角 + 裁剪 + 至少有2个层且其中有一个是content层, 会触发离屏渲染吗?
    由此我们可以确定圆角 + 裁剪 + 至少有2个层且其中有一个是content层, 会触发离屏渲染
    五、从图形成像角度理解离屏渲染 - 图7

3.2 有subview时

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

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

3.3 有sublayer时

结果先行: 圆角 + 裁剪 + 至少有2个层实际参与图层处理会触发离屏渲染
五、从图形成像角度理解离屏渲染 - 图10

4. 圆角优化方案


    1. 从上文中,我们可以知道,多个视图或单一视图的多层实际参与到圆角裁剪中时,会触发离屏渲染。所以我们在切圆角时,可以根据业务需求,如果可以把实际参与裁剪的层由多层改为单层,便可避免离屏渲染
      五、从图形成像角度理解离屏渲染 - 图11
      五、从图形成像角度理解离屏渲染 - 图12
  • 2.如果无法改成单层裁剪,由 UI 出圆角的图,直接盖在视图上是最简单方便的解决方案。

    1. 如果 UI 不配合出图,可以采用贝塞尔曲线画圆角,将要显示的效果直接生成一张图片,再交给 GPU 渲染, 就不会触发离屏渲染
      下面是 YYImage 的圆角处理方案
  1. - (UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius
  2. corners:(UIRectCorner)corners
  3. borderWidth:(CGFloat)borderWidth
  4. borderColor:(UIColor *)borderColor
  5. borderLineJoin:(CGLineJoin)borderLineJoin {
  6. if (corners != UIRectCornerAllCorners) {
  7. UIRectCorner tmp = 0;
  8. if (corners & UIRectCornerTopLeft) tmp |= UIRectCornerBottomLeft;
  9. if (corners & UIRectCornerTopRight) tmp |= UIRectCornerBottomRight;
  10. if (corners & UIRectCornerBottomLeft) tmp |= UIRectCornerTopLeft;
  11. if (corners & UIRectCornerBottomRight) tmp |= UIRectCornerTopRight;
  12. corners = tmp;
  13. }
  14. UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
  15. CGContextRef context = UIGraphicsGetCurrentContext();
  16. CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
  17. CGContextScaleCTM(context, 1, -1);
  18. CGContextTranslateCTM(context, 0, -rect.size.height);
  19. CGFloat minSize = MIN(self.size.width, self.size.height);
  20. if (borderWidth < minSize / 2) {
  21. UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners cornerRadii:CGSizeMake(radius, borderWidth)];
  22. [path closePath];
  23. CGContextSaveGState(context);
  24. [path addClip];
  25. CGContextDrawImage(context, rect, self.CGImage);
  26. CGContextRestoreGState(context);
  27. }
  28. if (borderColor && borderWidth < minSize / 2 && borderWidth > 0) {
  29. CGFloat strokeInset = (floor(borderWidth * self.scale) + 0.5) / self.scale;
  30. CGRect strokeRect = CGRectInset(rect, strokeInset, strokeInset);
  31. CGFloat strokeRadius = radius > self.scale / 2 ? radius - self.scale / 2 : 0;
  32. UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:strokeRect byRoundingCorners:corners cornerRadii:CGSizeMake(strokeRadius, borderWidth)];
  33. [path closePath];
  34. path.lineWidth = borderWidth;
  35. path.lineJoinStyle = borderLineJoin;
  36. [borderColor setStroke];
  37. [path stroke];
  38. }
  39. UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  40. UIGraphicsEndImageContext();
  41. return image;
  42. }