离屏渲染 - 简书

什么是离屏渲染

离屏渲染（offscreen-rendering）就是在当前显示屏幕之外开辟了另外一个缓冲区进行图形渲染。离屏渲染可以在GPU中也可以在CPU中，在CPU中的话一般是我们重写drawRect并且使用CoreGraphics进行绘制操作。既然有离屏渲染那么也有对应的在屏渲染（onscreen-rendering），即GPU的渲染操作是在当前显示的屏幕缓冲区中进行渲染。同时这个也是屏幕渲染的两种方式。

离屏渲染的作用

当各种图层效果（圆角、阴影、遮罩等等）的混合体在未预合成之前（下一个VSync信号到来之前）不能在屏幕上直接显示的时候，此时就在屏幕外开辟一片缓存区进行渲染。当一个渲染结果可能会多次出现在屏幕上，我们可以提前渲染保存在offscreenBuffer中，这样减少了很多渲染次数，提高了效率。

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

2011年的WWDC官方的公开资料提到在多个 session 里都提到了尽量避免会触发离屏渲染的效果，包括：mask, shadow, group opacity, edge antialiasing。

shouldRasterize（光栅化）
当shouldRasterize设为true时，layer就会被渲染成一个位图，并且保存起来。等下次使用的时候就不用重新去渲染了。但是这样做的话会触发离屏渲染，从而影响性能。因此需要使用光栅化的时候需要考虑以下的情况：
1. 当layer不能复用时，没必要打开光栅化。
2. 当layer不是静态的，需要被频繁修改，比如处于动画之中，那么此时开启光栅化就会影响效率了。
3. 图像内容保存是有时间限制的，缓存内容如果在100ms内没有被使用，则会被丢弃
4. 缓存空间也是有大小限制的，当超过2.5倍屏幕像素大小时，就被丢弃
masks（遮罩）
当layer.mask被设置时，也会触发。因为mask应用在layer和其子layer的组合之上，并且也有可能带有透明度、形状等不能立马在屏幕缓冲区中进行合成，也需要开辟另外的缓冲区进行渲染裁剪，最后统一合成。
shadows（阴影）layer.shadow
layer是一块矩形区域，shadow则是作用在layer中”非透明区域“并显示在所有layer内容的下方。根据画家算法必须被渲染在先。但是此时阴影和本体（layer和其子layer）都还没有被组合到一起，怎么可能在第一步就画出只有完成最后一步之后才能知道的形状呢？这样一来又只能另外申请一块内存，把本体内容都先画好，再根据渲染结果的形状，添加阴影到frame buffer，最后把内容画上去。
group opacity（不透明）layer.opacity
复杂形状设置圆角等 layer.cornerRadius
Text（UILabel, CATextLayer, Core Text, etc）...

离屏渲染的缺点

离屏渲染确实一方面通过缓存数据，提高了渲染效率。但是在另外一方面的话却也存在很大的问题。例如：

离屏渲染需要开辟另外的缓存空间，需要占用GPU的显存。
离屏渲染缓冲区频繁的切换上下文，这有极大的性能消耗。因为在渲染一个图形时，不同的layer会在帧缓冲区和离屏缓冲区之间进行渲染和切换，这种来回切换的话会造成很大的性能消耗。

那么如何避免离屏渲染了

如若没有大量重复的渲染时，尽量少使用光栅化。shouldRasterize=no
设置shadow时，需要设置阴影路径。layer.shadowPath
设置圆角时，如果能直接让UI修改图片为圆角时就尽量让UI修改。如果不能的话，可以使用贝塞尔曲线或者使用遮盖物。

圆角与离屏渲染

在我们项目开发中与离屏渲染最近的就是图形圆角。我们设置layer.cornerRadius和masksToBound（或clipToBounds）不一定会触发离屏渲染。当layer分解两层或者两层以上的图层进行渲染时才会进行离屏渲染。就如我们下面的例子中，我们通过代码创建了3个案例：

设置圆角、背景颜色、图片
设置圆角、图片
设置圆角、背景颜色

    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100, 30, 100, 100);
    btn1.layer.cornerRadius = 50;
    btn1.backgroundColor = UIColor.greenColor;
    btn1.clipsToBounds = YES;
    [btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    [self.view addSubview:btn1];
    
    
    //2.按钮设置了圆角、背景图片
    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(100, 180, 100, 100);
    btn2.layer.cornerRadius = 50;
    btn2.clipsToBounds = YES;
    [btn2 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    [self.view addSubview:btn2];
    
    
    //3.按钮只设置了圆角、颜色
    UIButton *btn3 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn3.frame = CGRectMake(100, 330, 100, 100);
    btn3.layer.cornerRadius = 50;
    btn3.backgroundColor = UIColor.greenColor;
    btn3.clipsToBounds = YES;
    [self.view addSubview:btn3];

Xcode编译代码后运行在模拟器上，通过打开模拟器->Debug->Color off-Screen Rendered后结果如下：

Simulator Screen Shot - iPhone SE (2nd generation) - 2020-07-08 at 17.43.22.png

从图看出1和2产生了离屏渲染，但是3却并没有产生。因为3只有设置backgroundColor和圆角，backgroundColor和圆角作用于背景图层的，在渲染时只会生成一个图层，那么它就不需要额外的地方去暂存，因此也就不会去触发。但是图1和图2虽然一个有设置backgroundColor一个没有设置，但是他们都有设置圆角，也就是说在渲染时会分解两个图层背景图层和内容图层，那么这时就需要暂存在离屏缓存区里面，最后统一裁剪。

圆角代码优化的几个方案

方案一：

3091C32C-6DD6-4994-ADA7-7AE24F0B893B.png

方案二：

25262897-88E7-4E55-A308-092D96D29FDE.png

另外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];