深入iOS离屏渲染

相信许多iOS开发者，都听说过离屏渲染，大部分应该是面试的时候被问及。然而真正知道离屏渲染的原理的开发者并不很多。下面我们就来深入探讨一下离屏渲染。

一、什么是离屏渲染

在正常情况下，经过CPU的计算以及GPU的渲染之后，会将结果存放到帧缓存区，随后视频控制器会读取帧缓存区的数据，经过数模转换，再逐行显示到屏幕上（如下图）。

image.png

并且在GPU渲染的过程中，一般情况下，会遵循‘画家算法’按次序由远及近的一层一层将结果放置到帧缓存区中，当当前帧缓存区的数据显示到屏幕上之后，就会将该帧丢弃，周而复始。（如下图）

画家算法，由远及近依次显示

但是，在某些特殊情况下（对一个多图层的view设置了圆角等），当我们一层层的渲染完图层，要应用一些操作，比如裁剪的时候，之前放置在帧缓存区的数据早已经被丢弃或者说是被覆盖了，这个时候也就不可能对所有图层做这些操作了。
因此，我们需要开辟一些离屏缓存区来存放一些中间状态的数据，等待全部的图层都渲染到离屏缓存区之后，分别从各个离屏缓存区取出数据，分别做相应的操作(裁剪等)之后，组合存入帧缓存区，再等待屏幕控制器的读取和屏幕刷新。大致流程如下图。

image.png

二、离屏渲染的利弊

劣势

离屏渲染其实是加大了系统的负担，确实会造成性能上的损耗。主要表现在以下几个方面。

• 离屏渲染需要额外的存储空间，存储空间大小的上限是2.5倍的屏幕像素大小，一旦超过，则无法使用离屏渲染
• 容易掉帧：一旦因为离屏渲染导致最终存入帧缓存区的时候，已经超过了16.67ms，则会出现掉帧的情况

优势

虽然离屏渲染会需要多开辟出新的临时缓存区来存储中间状态，但是对于多次出现在屏幕上的数据，可以提前渲染好，从而达到复用的目的，这样CPU/GPU就不用做一些重复的计算。

其实在很多iOS开发的需求背景之下，比如 一些特殊动画效果的开发，此时需要多图层以及离屏缓存区保存中间状态，这种情况下就不得不使用离屏渲染。

三、常见的几种出发离屏渲染的情况

1. 使用了 mask 的 layer (layer.mask)
2. 需要进行裁剪的 layer (layer.masksToBounds /view.clipsToBounds)
3. 设置了组透明度为 YES，并且透明度不为 1 的layer (layer.allowsGroupOpacity/ layer.opacity)
4. 添加了投影的 layer (layer.shadow*)
5. 采用了光栅化的 layer (layer.shouldRasterize)
6. 绘制了文字的 layer (UILabel, CATextLayer, Core Text 等)

四、离屏渲染的另外一个原因 - 光栅化

除了上述讲到的圆角裁剪之外，在iOS开发中其实还有很多情况会造成离屏渲染。比如 阴影、高斯模糊、光栅化等等。

阴影与高斯模糊造成离屏渲染的原因在上述的离屏渲染原理其实已经讲到，这里就不再赘述。这边主要说明一下光栅化。

光栅化 是将一个layer预先渲染成位图(bitmap)，然后加入缓存中。如果对于阴影效果这样比较消耗资源的静态内容进行缓存，可以得到一定幅度的性能提升。

因此，在使用光栅化的时候，有以下建议

1、如果layer不能被重用，则没必要使用光栅化；
2、如果我们更新已光栅化的layer,会造成大量的离屏渲染。例如UITableViewCell因为复用的原因，重绘是很频繁的。如果此时设置了光栅化，反而会造成大量离屏渲染，降低性能；
3、离屏渲染的缓存是有时间限制的，100ms内如果缓存的内容没有被复用，则会被丢弃，也就无法复用了；
4、离屏渲染的空间有限，超过2.5倍屏幕像素的大小，离屏渲染也会失效，无法复用。

五、常见的圆角导致的离屏渲染的处理方法

方案1

_imageView.clipsToBounds=YES;
_imageView.layer.cornerRadius=4.0;

方案2

image.png

方案3

image.png

方案4

image.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]; 
}