一、离屏渲染的由来
GPU渲染的过程中，一般情况会遵循‘画家算法’按次序由远及近的一层一层将结果放置到帧缓存区中，当当前帧缓存区的数据显示到屏幕上之后，帧缓存区就会将该帧丢弃，周而复始。
当图层一层层渲染完，此时如果我们需要对图层进行一些操作例如裁剪，之前放置在帧缓存区的数据早已经被丢弃或者说是被覆盖了，这个时候也就不可能对所有图层做这些操作了。
我们需要开辟一些离屏缓存区来存放一些中间状态的数据，等待全部的图层都渲染到离屏缓存区之后，分别从各个离屏缓存区取出数据，分别做相应的操作(裁剪等)之后，组合存入帧缓存区，再等待屏幕控制器的读取和屏幕刷新
正常渲染流程：
GPU进⾏渲染->存放在帧缓存区⾥ ->视频控制器读取帧缓存区信息(位图) -> 数模转化(数字信号处->模拟型号) ->(逐⾏扫描)显示
图片来自网络
离屏渲染流程
app进⾏额外的渲染和合并-> offscreen Buffer 组合. -> FrameBuffer(帧缓冲区) ->显示
图片来自网络
二、离屏渲染的存在的问题：
1、offScreenBuffer空间大小有限制，为屏幕像素点的2.5倍。
2、容易掉帧，产生性能问题。
3、渲染需要时间，会产生性能问题。
三、常见的几种触发离屏渲染方式
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 等)
在使用光栅化的时候，有以下建议:
- 如果layer不能被重用，则没必要使用光栅化；
- 如果我们更新已光栅化的layer,会造成大量的离屏渲染。例如UITableViewCell因为复用的原因，重绘是很频繁的。如果此时设置了光栅化，反而会造成大量离屏渲染，降低性能；
- 离屏渲染的缓存是有时间限制的，100ms内如果缓存的内容没有被复用，则会被丢弃，也就无法复用了；
- 离屏渲染的空间有限，超过2.5倍屏幕像素的大小，离屏渲染也会失效，无法复用
四、案例分析
案例分析前，讲下CALayer的构成，如图所示，它是由backgroundColor、contents、borderWidth&borderColor构成的。它跟案例中圆角触发离屏渲染息息相关
CALayer结构图
圆角设置不生效
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置背景色
view1.backgroundColor = UIColor.redColor;
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
[self.view addSubview:view1];
运行结果
我们会发现圆角并没有设置成功，当然绝大部分iOS开发都知道怎么处理，但很少有人知道原理
苹果官方文档关于圆角的说明
官方文档告诉我们，设置cornerRadius只会对CALayer中的backgroundColor和boder设置圆角，不会设置contents的圆角，如果contents需要设置圆角，需要同时将maskToBounds / clipsToBounds设置为true。
所以我们可以理解为圆角不生效的根本原因是没有对contents设置圆角，而按钮设置的image是放在contents里面的，所以看到的界面上的就是image没有进行圆角裁剪。
我们通过代码来看下什么情况下会触发离屏渲染
先开启离屏渲染颜色标记
开启离屏渲染颜色标记
例1 设置uiview图片+cornerRadius
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
view1.clipsToBounds = YES;
[self.view addSubview:view1];
例1 运行结果
从结果来看，不会触发离屏渲染
例2 设置uiview背景颜色+图片+cornerRadius
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置背景色
view1.backgroundColor = UIColor.redColor;
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
view1.clipsToBounds = YES;
[self.view addSubview:view1];
例2 运行结果
从结果来看，触发了离屏渲染
例3 设置imageView设置了图片+背景色+cornerRadius
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100,50,100,100)];
// 设置背景色
// view1.backgroundColor = UIColor.redColor;
// 设置圆角
view1.layer.cornerRadius = 50.0;
//设置图片
// view1.layer.contents = (__bridge id)[UIImage imageNamed:@"btn"].CGImage;
view1.clipsToBounds = YES;
[self.view addSubview:view1];
// 子视图
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100.0, 100.0)];
// 下面3个任何一个属性
// 设置背景色
// view2.backgroundColor = UIColor.blueColor;
// 设置内容
view2.layer.contents = (__bridge id)([UIImage imageNamed:@"btn"].CGImage);
[view1 addSubview:view2];
从结果来看，触发了离屏渲染
经过各种测试，我们为视图添加一个有颜色、内容或边框等有图像信息的子视图也会触发离屏渲染。
例4 按钮设置背景图片+cornerRadius
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(100,50,100,100);
btn1.layer.cornerRadius = 50;
[self.view addSubview:btn1];
[btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
btn1.clipsToBounds=YES;
从结果看，触发了离屏渲染
例5 按钮设置背景颜色+cornerRadius
UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
btn2.frame=CGRectMake(100,200,100,100);
btn2.layer.cornerRadius = 50;
btn2.backgroundColor = [UIColor blueColor];
[self.view addSubview:btn2];
btn2.clipsToBounds=YES;
例5 运行结果
从结果看，没有触发离屏渲染
总结
- 当只有一个layer时，想要触发触发离屏渲染， 必须backgroundColor + contents + cornerRadius + maskToBounds / clipsToBounds(YES) 必须都设置
- 当有多个layer时，想要触发离屏渲染，设置backgroundColor / contents + cornerRadius + maskToBounds / clipsToBounds(YES)；
- uibutton比较特殊，想要触发离屏渲染，设置contents + cornerRadius + maskToBounds / clipsToBounds(YES)；
网友评论