我们看到的屏幕上的数据展示有两种加载流程：
1、正常渲染加载流程
2、离屏渲染加载流程
如下图所示：
可以看出，离屏渲染比正常渲染多了一个离屏缓冲区，这个缓冲区的作用是什么呢？为什么要加这个缓冲区呢？
首先，说说正常渲染流程
正常渲染流程
APP中的数据经过CPU计算和GPU渲染后，将结果存放在帧缓冲区，利用视频控制器从帧缓冲区中取出，并显示到屏幕上。
在GPU的渲染流程中，显示到屏幕上的图像是遵循画家算法按照由远及近的顺序，依次将结果存储到帧缓冲区
视频控制器从帧缓冲区中读取一帧数据，将其显示到屏幕上后，会立即丢弃这帧数据，不会做任何保留，这样做的目的是可以节省空间，且在屏幕上是各自显示各自的，互相不影响。
离屏渲染流程
当App需要进行额外的渲染和合并时，例如按钮设置圆角，我们是需要对UIButton这个控件中的所有图层都进行圆角+裁剪，然后再将合并后的结果存入帧缓存区，再从帧缓存中取出交由屏幕显示，这时，在正常的渲染流程中，我们是无法做到对所有图层进行圆角裁剪的，因为它是用一个丢一个。所以我们需要提前将处理好的结果放入离屏缓冲区，最后将几个图层进行叠加合并，存放到帧缓冲区，最后屏幕上就是我们想实现的效果。
由此可以看出，离屏缓存区就是一个临时的缓冲区，用来存放在后续操作使用，但目前并不使用的数据。
离屏渲染再给我们带来方便的同时，也带来了严重的性能问题。由于离屏渲染中的离屏缓冲区，是额外开辟的一个存储空间，当它将数据转存到Frame Buffer时，也是需要耗费时间的，所以在转存的过程中，仍有掉帧的可能。
离屏缓冲区的空间并不是无限大的，最大只能是屏幕的2.5倍
那为什么我们明知有性能问题时，还是要使用离屏渲染呢？
可以处理一些特殊的效果，这种效果并不能一次就完成，需要使用离屏缓冲区来保存中间状态，不得不使用离屏渲染，这种情况下的离屏渲染是系统自动触发的，例如经常使用的圆角、阴影、高斯模糊、光栅化等
可以提升渲染的效率，如果一个效果是多次实现的，可以提前渲染，保存到离屏缓冲区，以达到复用的目的。这种情况是需要开发者手动触发的。
注意：通常会触发离屏渲染，除了圆角、剪裁外，还有设置了透明度+组透明（layer.allowsGroupOpacity+layer.opacity），阴影属性（shadowOffset 等）因为组透明度、阴影都是和裁剪类似的，会作用与 layer 以及其所有 sublayer 上，这就导致必然会引起离屏渲染。
离屏渲染的另一个情况：光栅化(shouldRasterize )
官方文档
由文档中我们可以看出，当开启光栅化时，会将layer渲染成位图保存在缓存中，这样在下次使用时，就可以直接复用，提高效率。
shouldRasterize使用建议：
layer不复用，没必要使用shouldRasterize
layer不是静态的，也就是说要频繁的进行修改，没必要使用shouldRasterize
时间方面：离屏渲染缓存有100ms时间限制，超过该时间的内容会被丢弃，进而不能达到复用的目的
空间方面：离屏渲染空间是屏幕像素的2.5倍，如果超过也无法复用。
圆角与离屏渲染
首先说明下CALayer的构成，如图所示，它是由backgroundColor、contents、borderWidth&borderColor构成的。跟我们即将研究的圆角触发离屏渲染息息相关。
圆角设置不生效问题！
在平常写代码时，比如UIButton设置圆角，当设置好按钮的image、cornerRadius、borderWidth、borderColor等属性后，运行发现并没有实现我们想要的效果
let btn = UIButton(type: .custom)
btn.frame = CGRect(x: 100, y: 60, width: 100, height: 100)
//设置圆角
btn.layer.cornerRadius = 50
//设置border宽度和颜色
btn.layer.borderWidth = 2
btn.layer.borderColor = UIColor.red.cgColor
self.view.addSubview(btn0)
//设置背景图片
btn.setImage(UIImage(named: "cat"), for: .normal)
当我们运行时，我们发现没有效果如下图：
看到上面的情况大家都会设置masksToBounds为 true，解决的方法很简单，但原理是大部人都没有去仔细研究的。
让我们看看苹果官方文档：
官方文档告诉我们，设置cornerRadius只会对CALayer中的backgroundColor 和 boder设置圆角，不会设置contents的圆角，如果contents需要设置圆角，需要同时将maskToBounds / clipsToBounds设置为true。
所以我们可以理解为圆角不生效的根本原因是没有对contents设置圆角，而按钮设置的image是放在contents里面的，所以看到的界面上的就是image没有进行圆角裁剪。
下面我们通过几段代码来说明 圆角设置中什么时候会离屏渲染触发
首先，需要打开模拟器的离屏渲染颜色标记
1、按钮 仅设置背景颜色+border
let btn01 = UIButton(type: .custom)
btn01.frame = CGRect(x: 100, y: 200, width: 100, height: 100)
//设置圆角
btn01.layer.cornerRadius = 50
//设置border宽度和颜色
btn01.layer.borderWidth = 4
btn01.layer.borderColor = UIColor.blue.cgColor
self.view.addSubview(btn01)
//设置背景颜色
btn01.backgroundColor = UIColor.yellow
在这种情况下，无论是使用默认的maskToBounds / clipsToBounds（false），还是将其修改为true，都不会触发离屏渲染，究其根本原因是 contents中没有需要圆角处理的layer。
2、按钮设置背景图片+boder
let btn0 = UIButton(type: .custom)
btn0.frame = CGRect(x: 100, y: 60, width: 100, height: 100)
//设置圆角
btn0.layer.cornerRadius = 50
//设置border宽度和颜色
btn0.layer.borderWidth = 2
btn0.layer.borderColor = UIColor.red.cgColor
self.view.addSubview(btn0)
//设置背景图片
btn0.setImage(UIImage(named: "cat.jpg"), for: .normal)
使用默认的maskToBounds / clipsToBounds（false）
这种情况就是最开始我们讲到的圆角设置不生效的情况，就不再多做说明了
maskToBounds / clipsToBounds 修改为true
3、ImageView设置背景+圆角
let imageView = UIImageView()
imageView.frame = CGRect(x: 100, y: 60, width: 100, height: 100)
imageView.layer.backgroundColor = UIColor.red.cgColor
imageView.layer.cornerRadius = 50
self.view.addSubview(imageView)
这种情况会得到圆角的且不会触发离屏渲染。
4、ImageView设置图片+圆角
let imageView = UIImageView()
imageView.frame = CGRect(x: 100, y: 60, width: 100, height: 100)
// imageView.layer.backgroundColor = UIColor.red.cgColor
imageView.layer.cornerRadius = 50
imageView.image = UIImage(named: "cat.jpg")
imageView.clipsToBounds = true
self.view.addSubview(imageView)
此时我们不设置背景色，这种情况会得到圆角的且不会触发离屏渲染。
5、ImageView设置图片+圆角+背景色
let imageView = UIImageView()
imageView.frame = CGRect(x: 100, y: 60, width: 100, height: 100)
imageView.layer.backgroundColor = UIColor.red.cgColor
imageView.layer.cornerRadius = 50
imageView.image = UIImage(named: "cat.jpg")
imageView.clipsToBounds = true
self.view.addSubview(imageView)
我们发现这时得到了圆角但是触发了离屏渲染
总结
当只设置backgroundColor、border，而contents中没有子视图时，无论maskToBounds / clipsToBounds是true还是false，都不会触发离屏渲染
当contents中有子视图时，此时设置 cornerRadius+maskToBounds / clipsToBounds,就会触发离屏渲染
优化、
常见的圆角导致的离屏渲染的处理方法
方案1
_imageView.clipsToBounds=YES;
_imageView.layer.cornerRadius=4.0;
方案2
方案3
方案4
最后，大家看下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];
}
