一、什么是离屏渲染
有一个场景：以 钛信 的最近聊天会话列表为例：每个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且背景不是透明时，才会出现离屏渲染。
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;
}
