剖析离屏渲染

截屏2020-07-07 下午10.39.24.png

面试中是否遇到过这样的问题，了解离屏渲染吗？什么时候会触发离屏渲染？

我们都会答出：当绘制圆角(cornerRadius)、遮罩(mask)、透明度（alpha）、阴影（shadow）等时候回触发离屏渲染。
当面试官再深一点，进一步问出：

• 是不是设置cornerRadius，alpha等时一定会触发离屏渲染？
• 具体哪一步触发的离屏渲染？为什么？
  然后就不太能回答了吧。Follow Me！我们一起看看。

1. 什么是离屏渲染。

OutOffScreen Rendering意为离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

2. 离屏渲染出现的原因是什么呢？

一个控件的正常渲染流程是

• 过程：CPU 计算 -> GPU进行渲染->双帧缓存区里（显存）->视频控制器->读取帧缓存区信息（位图）-> 数模转化（数字信号->模拟信号）->显示（逐行扫描）。
  简化后：
  APP -> DataBuffer -> ImageBuffer -> FrameBuffer -> Render

  
  截屏2020-07-07 下午10.36.41.png
  当sublayer 绘制到屏幕上之后，就会将sublayer 从帧缓冲区中移除，从而节省空间。 截屏2020-07-07 下午10.39.24.png

而离屏渲染的流程是
APP-> OutOffScreen Buffer ->合成->FrameBuffer->Render

那么为什么出现离屏渲染。
按照油画算法:按次序输出到frame buffer，后一层覆盖前一层，就能得到最终的显示结果。

image

然而有些场景并没有那么简单。作为“画家”的GPU虽然可以一层一层往画布上进行输出，但是无法在某一层渲染完成之后，再回过头来擦除/改变其中的某个部分——因为在这一层之前的若干层layer像素数据，已经在渲染中被永久覆盖了。这就意味着，对于每一层layer，要么能找到一种通过单次遍历就能完成渲染的算法，要么就不得不另开一块内存，借助这个临时中转区域来完成一些更复杂的、多次的修改/剪裁操作，即offscreenBuffer 离屏缓存区。

以圆角为例：
当我们设置：view.layer.coner = 3.0f,即控件的圆角大于0。通过debug中color-offscreenbuffer可以看到,此时是不会触发离屏渲染的。

截屏2020-07-07 下午10.44.25.png

这时我们意识到是不是离屏渲染的原因是btn.layer.masksToBounds = YES。
接着分析，当一个button不包含图片时，切圆角/阴影，并使用

btn.layer.coner = 3.0f
btn.layer.masksToBounds = YES

我们看看触发离屏渲染了吗,答案是此时不会触发离屏渲染！！
如果我们在此基础上，给btn加个图片，即btn.image = [uiimage imageName:@".png"];此时会触发离屏渲染。

那究竟是什么原因导致离屏渲染的呢？

原来当btn包含多个layer的时候,我们再对其切圆角或者设置shadow，在渲染过程中，遵循油画算法，会将多个layer分别依次进行圆角，然后储存到 offscreenBuffer，直到将所有的layer进行圆角化后，再进行合成，经过frameBuffer（帧缓存区），再进行Render。所以会触发离屏渲染。

3. 真正触发离屏渲染

• 常见离屏渲染的几种情况
  截屏2020-07-07 下午10.34.25.png

截屏2020-07-07 下午10.23.44.png

如图，控件的层分为backgroundColor -- content -- border三个部分。

• 背景色、边框、背景色+边框，再加上圆角+裁剪，根据文档说明，因为 contents = nil 没有需要裁剪处理的内容，所以masksToBounds设置为YES或者NO都没有影响。
• 一旦我们 为contents设置了内容 ，无论是图片、绘制内容、有图像信息的子视图等，再加上圆角+裁剪，就会触发离屏渲染。

4.怎么避免离屏渲染。

ios 9以后的优化，我们只设置contents或者UIImageView的image，并加上圆角+裁剪，是不会产生离屏渲染的。但如果加上了背景色、边框或其他有图像内容的图层，还是会产生离屏渲染。

所以：
当我们使用UIButton 并为其设置image的时候，这时相当于为button设置了一个imageView的子view。此时she zhi

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    // 创建一个button视图
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200.0, 200.0)];
    //设置图片
    [button setImage:[UIImage imageNamed:@"pkq"] forState:UIControlStateNormal];
    button.center = self.view.center;
    [self.view addSubview:button];
}

此时为button设置圆角

button.layer.cornerRadius = 100.0;
// 设置裁剪
button.clipsToBounds = YES;

一定会触发离屏渲染。

• 优化：
  如果改为UIButton中的UIImageView添加圆角和裁剪，则 不会触发离屏渲染。

// 设置圆角
button.imageView.layer.cornerRadius = 100.0;
// 设置裁剪
button.imageView.clipsToBounds = YES;

另外，如果可以的化可以让UI切图为圆角，就没必要对控件圆角化处理。

结论：包含多个layer的时候,我们再对其切圆角或者设置shadow，在渲染过程中，遵循油画算法，会将多个layer分别依次进行圆角，然后储存到 offscreenBuffer，直到将所有的layer进行圆角化后，再进行合成，经过frameBuffer（帧缓存区），再进行Render。所以会触发离屏渲染。

想了解更多非常推荐这两篇文章，获益良多。
关于iOS离屏渲染的深入研究
iOS圆角的离屏渲染，你真的弄明白了吗