一、什么是离屏渲染

有一个场景：以 TioIM 的最近聊天会话列表为例：每个cell上的头像图片均需要裁剪，使用如下方式设置圆角

图片是异步加载

imageView.backgroundColor = [UIColor whiteColor];
imageView.layer.cornerRadius = 50;
imageView.layer.masksToBounds = YES;

当滑动列表时，且当数据量比较大时，快速滑动会发现列表卡顿，我们进行如下操作，查看

开启模拟器的离屏渲染，会发现

imageView变成了黄色，说明出现了 离屏渲染。

我们修改一下代码，去掉裁剪masksToBounds

imageView.backgroundColor = [UIColor whiteColor];
imageView.layer.cornerRadius = 50;
// imageView.layer.masksToBounds = YES;

结果如下：content(image)没有裁剪，也没有看到离屏渲染

我们再修改一下代码，去掉backgroundColor

// imageView.backgroundColor = [UIColor whiteColor];
imageView.layer.cornerRadius = 50;
imageView.layer.masksToBounds = YES;

黄色部分消失

所以说设置了 cornerRadius 未必会导致离屏渲染,

出现离屏渲染后，渲染显示发生了什么变化？

没有离屏渲染时的步骤

发生离屏渲染后的渲染步骤

二、为什么会在帧缓存区之前多了离屏渲染？

渲染管线从Core Animation 到 Display 的工作流程

如果渲染的画面比较复杂，如上面案例，背景色backgroundColor需要渲染，content(image)也需要裁剪渲染，如果不按离屏渲染 的步骤，根据画家算法，先显示远处的背景（类比平时子控件布局，最先显示的在最下面）：

背景色backgroundColor渲染之后的位图先进入 帧缓冲区->屏幕，帧缓冲区的backgroundColor清空
content(image)的位图再进入 帧缓冲区->屏幕 ，帧缓冲区的content(image)被清空。
content(image)裁剪？？？？没有东西可裁剪了，刚刚帧缓冲区已经被清空了。

所以，需要额外开辟一块缓冲区，等待合成、裁剪完成后-->帧缓冲区-->屏幕显示。 那么，这个额外的处理复杂渲染数据的地方就是 离屏渲染缓冲区(Offscreen Buffer)。 所以，在帧缓冲区之前要多了一个离屏渲染缓冲区。

下面是RenderServer进入GPU到显示前，以流程图的形式将上面的文字直观化出来：

第一步：先渲染纹理（Texture），纹理可以理解成content内容，在imageview里就是image。
第二步：渲染背景绿色
第三步：在开辟的离屏渲染缓冲区里，将纹理和背景组合 -> Frame Buffer -> 屏幕显示

如果没有cornerRadius，不会出现离屏渲染

背景色backgroundColor渲染之后的位图先进入 帧缓冲区->屏幕，帧缓冲区的backgroundColor清空
content(image)的位图再进入 帧缓冲区->屏幕 ，帧缓冲区的content(image)被清空。
结束

直接按部就班，按照画家算法一层一层显示到屏幕就OK，根本用不着等到离屏渲染缓冲区进行额外的处理完再显示。

如果cell有离屏渲染 tableview 在快速滑动时出现卡顿

当我们知道为什么会触发离屏渲染，以及离屏渲染会在渲染流程哪一步进行，我们再来看看tableview的卡顿问题。当然，促使tableview卡顿的原因有很多，我们只谈因为离屏渲染导致的卡顿。

如果每一个cell都会有一个甚至若干个控件会出现离屏渲染，其中每一个渲染都要等到离屏渲染结束后才给帧缓冲区等待显示，看上图的渲染管线的流程，GPU在没有离屏渲染时是16.67ms，如果有离屏渲染处理，在大量cell快速滚动，出现的cell不断重新渲染，内部的多个离屏渲染也在进行大量的耗时处理，这就太可怕了。所以在这种时候，我们要优化离屏渲染。

三、什么时候会触发离屏渲染/哪些场景下会有离屏渲染？

很多同学会非常熟悉文章开头的场景cornerRadius+masksToBounds。

1、cornerRadius+masksToBounds

在前面的会话列表几个不同情况中，我们已经可以看到cornerRadius+masksToBounds并不是一定会引发离屏渲染，只有当。关键是要看有几层渲染数据：backgroundcolor、content(image、text等)。

    // img1 content masksToBounds
    UIImageView *img1 = [UIImageView.alloc initWithFrame:CGRectMake(100, 30, 100, 100)];
    img1.image = [UIImage imageNamed:@"btn.png"];
    img1.layer.cornerRadius = 50;
    img1.layer.masksToBounds = YES;
    [self.view addSubview:img1];
    
    // img2 只有backgroundColor
    UIImageView *img2 = [UIImageView.alloc initWithFrame:CGRectMake(100, 180, 100, 100)];
    img2.layer.cornerRadius = 50;
    img2.backgroundColor = UIColor.redColor;
    [self.view addSubview:img2];
    
    // content + backgroundColor
    UIImageView *img3 = [UIImageView.alloc initWithFrame:CGRectMake(100, 320, 100, 100)];
    img3.image = [UIImage imageNamed:@"btn.png"];
    img3.backgroundColor = UIColor.redColor;
    img3.layer.cornerRadius = 50;
    [self.view addSubview:img3];
    
    // content + backgroundColor + masksToBounds
    UIImageView *img4 = [UIImageView.alloc initWithFrame:CGRectMake(100, 480, 100, 100)];
    img4.image = [UIImage imageNamed:@"btn.png"];
    img4.backgroundColor = UIColor.redColor;
    img4.layer.cornerRadius = 50;
    img4.layer.masksToBounds = YES;
    [self.view addSubview:img4];

而且，我们还能看到另外的一个知识点：cornerRadius并不是对content(image)有效，根据苹果官方解释：cornerRadius 的文档中明确说明对 cornerRadius 的设置只对 CALayer 的 backgroundColor 和 borderWidth、borderColor起作用。

cornerRadius+masksToBounds 只有在设置了content且背景不是透明时，才会出现离屏渲染。

如果一定要使用cornerRadius+masksToBounds的方式裁切图片，不要设置backgroundColor。

2、毛玻璃模糊效果

渲染的位图并不能直接给帧缓存区等待显示，而要经过模糊处理之后才能将最后的渲染数据 -> 帧缓冲区-> 显示。

3、shadow

开启阴影效果，首先要shadow是一个什么样的存在？他又是如何被渲染绘制？

shadow是一个矩形，是一个背景色，是layer的背景，所以是在layer的下面。shadow是根据layer而来，所以要先知道layer才能直到shadow的大小位置。

如果没有离屏渲染，和前文一样，按照画家算法，必须先将shadow放入帧缓存区，先显示。但是layer没有，不可能先渲染出shadow，只能利用离屏渲染缓冲区，等待shadow、layer等渲染并合并完成后，再送入帧缓存区等待显示。

4、shouldRasterize 光栅化

CALayer的属性官方文档给的是：

意思是如果开启，会将layer最后的渲染，包括阴影、裁切等的最终效果变成位图放入离屏缓冲区，等待复用。但是，离屏缓冲区的大小不能超过屏幕的2.5倍，否则被释放；其次，layer如果不是静态的，比如imageview的image需要改变，label的text会发生改变等会发生频繁改变的，开启shouldRasterize离屏渲染会影响效率；还有，离屏缓冲区是有时间限制的，超过100ms如果没有被使用，也会被释放。

所以，我们要善用shouldRasterize：

如果layer不是静态的，不建议开启
如果layer不能不能被复用，也不建议开启，cell被复用，动画中的layer等
超过100ms没有被复用，也不建议开启
超出离屏渲染控件屏幕像素的2.5倍，也不建议开启

5、group opacity 组透明度

有很多sublayer，当我们对大的layer设置alpha时，会首先在离屏渲染缓冲区等待整个layer里面的sublayer全部完成后，再根据组透明度opacity计算新的颜色，再和下面的layer颜色整合，才会给帧缓冲区等待显示。所以并不是每渲染一层sublayer就立马给显示。如果opacity为1则不需要调整透明度，正常画家算法显示。

6、使用了 masks

masklayer 作为遮罩，显示在其所在的大layer以及大layer的所有子sublayer之上。masklayer可能也会带有透明度、形状（例如，显示指定区域内的的内容）等。

面对上面的一种情况，我们必须在离屏渲染缓冲区内完成Image和Mask的裁切合并处理，才能将最终的Masked Image -> 帧缓冲区显示。

四、圆角裁切/裁剪异步加载的网络图片

我在实际工作当中，遇到特别是针对 异步加载后的网络图片进行圆角裁切，具体写在我的博客 SDWebImage网络图片的圆角裁切和不变形处理有兴趣的同学可以看一看。主要解决：

UIImageView 异步下载网络图后，不拉伸变形显示
没有离屏渲染的圆角裁剪
网络图片圆角裁剪

部分裁切的核心代码

- (instancetype)imageWithCornerRadius:(CGFloat)cornerRadius size:(CGSize)newSize
{
    UIImage *originImage = self;
    
    // 开始裁切圆角
    CGRect bounds = CGRectMake(0, 0, newSize.width, newSize.height);
    UIGraphicsBeginImageContextWithOptions(newSize, NO, UIScreen.mainScreen.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:bounds
                                                    cornerRadius:cornerRadius];
    CGContextAddPath(context, path.CGPath);
    CGContextClip(context);
    [originImage drawInRect:bounds];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

具体请移步 SDWebImage网络图片的圆角裁切和不变形处理