关于 iOS 离屏渲染的分析与处理

1、什么是离屏渲染

有一个场景：以 TioIM 的最近聊天会话列表为例：每一个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 未必会致使离屏渲染,

出现离屏渲染后，渲染显示发生了什么变化？

没有离屏渲染时的步骤

发生离屏渲染后的渲染步骤

2、为何会在帧缓存区以前多了离屏渲染？

渲染管线从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不断从新渲染，内部的多个离屏渲染也在进行大量的耗时处理，这就太可怕了。因此在这种时候，咱们要优化离屏渲染。

3、何时会触发离屏渲染/哪些场景下会有离屏渲染？

不少同窗会很是熟悉文章开头的场景cornerRadius+masksToBounds。

一、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且背景不是透明时，才会出现离屏渲染。

若是必定要使用cornerRadius+masksToBounds的方式裁切图片，不要设置backgroundColor。

二、毛玻璃模糊效果

渲染的位图并不能直接给帧缓存区等待显示，而要通过模糊处理以后才能将最后的渲染数据 -> 帧缓冲区-> 显示。

三、shadow

开启阴影效果，首先要shadow是一个什么样的存在？他又是如何被渲染绘制？

shadow是一个矩形，是一个背景色，是layer的背景，因此是在layer的下面。shadow是根据layer而来，因此要先知道layer才能直到shadow的大小位置。

若是没有离屏渲染，和前文同样，按照画家算法，必须先将shadow放入帧缓存区，先显示。可是layer没有，不可能先渲染出shadow，只能利用离屏渲染缓冲区，等待shadow、layer等渲染并合并完成后，再送入帧缓存区等待显示。

四、shouldRasterize 光栅化

CALayer的属性 官方文档给的是：

意思是若是开启，会将layer最后的渲染，包括阴影、裁切等的最终效果变成位图放入离屏缓冲区，等待复用。可是，离屏缓冲区的大小不能超过屏幕的2.5倍，不然被释放；其次，layer若是不是静态的，好比imageview的image须要改变，label的text会发生改变等会发生频繁改变的，开启shouldRasterize离屏渲染会影响效率；还有，离屏缓冲区是有时间限制的，超过100ms若是没有被使用，也会被释放。

因此，咱们要善用shouldRasterize：

• 若是layer不是静态的，不建议开启
• 若是layer不能不能被复用，也不建议开启，cell被复用，动画中的layer等
• 超过100ms没有被复用，也不建议开启
• 超出离屏渲染控件 屏幕像素的2.5倍，也不建议开启

五、group opacity 组透明度

有不少sublayer，当咱们对大的layer设置alpha时，会首先在离屏渲染缓冲区等待整个layer里面的sublayer所有完成后，再根据组透明度opacity计算新的颜色，再和下面的layer颜色整合，才会给帧缓冲区等待显示。 因此并非每渲染一层sublayer就立马给显示。若是opacity为1则不须要调整透明度，正常画家算法显示。

六、使用了 masks

masklayer 做为遮罩，显示在其所在的大layer以及大layer的全部子sublayer之上。masklayer可能也会带有透明度、形状（例如，显示指定区域内的的内容）等。

面对上面的一种状况，咱们必须在离屏渲染缓冲区内完成Image和Mask的裁切合并处理，才能将最终的Masked Image -> 帧缓冲区显示。

4、圆角裁切/裁剪异步加载的网络图片

我在实际工做当中，遇到特别是针对 异步加载后的网络图片进行圆角裁切， 具体写在个人博客 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;
}

复制代码

具体请移步 SDWebImage网络图片的圆角裁切和不变形处理