iOS 离屏渲染探索与解决办法

一.什么是离屏渲染

1渲染步骤

简单渲染流程

• 布局,设置View的层级信息,设置layer的属性如frame,background color 等
• Core Animation 框架准备要渲染的 layer 的各种属性数据传递給 render server。同时在这个阶段也会解压要渲染的 image。（除了用 imageNamed：方法从 bundle 加载的 image 会立刻解压之外，其他的比如直接从硬盘读入，或者从网络上下载的 image 不会立刻解压，只有在真正要渲染的时候才会解压）
• Core Animation 打包 layer 的信息传递給 render server。
• 从这里开始就是在GPU中进行,数据到达 render server 后，会被反序列化成 render tree,根据 layer 的各种属性（如果是动画的，会计算动画 layer 的属性的中间值)
• GPU不停的将内容渲染完成放到帧缓冲区中（FrameBuffer）。最后显示到屏幕上
• 而离屏渲染需要把渲染好的的内容存放到离屏渲染缓冲区中，在离屏渲染缓冲区（OffscreenBuffer）中进一步做一些处理后，再提交到帧缓冲区（FrameBuffer）中

• 举个例子

  
  
  渲染图片过程
• 如果上图中 我们给图片设置圆角+裁剪 但是三个sublayer已近从帧缓存区删除.所以我们要绘制圆角时需要将sublayer1时要将其缓存到offscreen Buffer 中,并对其进行裁剪操作,剩下两张也是如此,最后再依次取出三个已经处理完圆角的sublayer,同时绘制到屏幕上

2 离屏渲染的特点

• App在帧缓冲区之外开辟的一块临时缓冲区，用来进⾏额外的渲染和合并
• 离屏渲染存在对性能的消耗，适当的场景可以进行复用优化
• 最大可存储屏幕像素点2.5倍,在未复用时最长存在时间为100ms

3 iOS中离屏渲染检测

离屏渲染检测开关

开启后效果

代码

• 按钮2只设置背景色未设置图片, 图4 设置了 cornerRadius 未设置背景色, 未导致离屏渲染,由此可见cornerRadius+masksToBounds并不是一定会引发离屏渲染,关键是要看有几层渲染数据：backgroundcolor、content(image、text等)。这里的多层渲染数据不是指的多个layer
• 苹果官方文档中明确说明对 cornerRadius 的设置只对 CALayer 的 backgroundColor 和 borderWidth、borderColor起作用.所以说imageVIew一定要使用cornerRadius+masksToBounds的方式裁切图片的话，不要设置backgroundColor.

4 iOS中出现离屏渲染情况

• 上面说到的 cornerRadius+masksToBounds 可能会出现
• shadow 阴影效果参考圆角,相当于增加一层阴影渲染图层
• shouldRasterize 光栅化 根据官方文档解释意如果开启，会将layer最后的渲染，包括阴影、裁切等的最终效果变成位图放入离屏缓冲区，等待复用.也就是说在layer是静态的,在100ms内能够被复用可以开启,
• group opacity 组透明度不为1 给拥有多个sublayer的layer设置alpha时开辟离屏渲染缓冲区,根据opacity计算颜色并进行颜色混合后统一显示
• masks

5 解决办法

• 如果是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;
}

• 制作一个圆角遮盖图片,放到每一个需要展示圆角的控件上.当然这个根据自己的项目需求来

• 使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

//对imageView进行画图
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size,NO,1.0);
//使用贝塞尔曲线画出一个圆形图
[[UIBezierPath bezierPathWithRoundedRect:imageView.boundscornerRadius:imageView.frame.size.width]addClip];
[imageView drawRect:imageView.bounds];
imageView.image=UIGraphicsGetImageFromCurrentImageContext();
//结束画图
UIGraphicsEndImageContext();

6 tabelVIew 离屏渲染卡顿分析

• 在UITableVIewcell触发了离屏渲染，会导致在滑动的时候高频率的开辟离屏缓冲区,多次切换上下文环境.苹果才用垂直同步信号(VSync)与双缓冲机制避免了屏幕撕裂问题,感兴趣的同学可以了解下,这里就不多说了.CPU 计算好显示内容提交到 GPU，GPU 渲染完成后将渲染结果放入帧缓冲区，随后视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示.离屏渲染发生一个信号到达时,视频控制器去读取顶点数据而因为离屏缓冲区交换缓冲区导致帧缓冲区内的内容还未更新,所以屏幕还会显示上一帧的内容,导致我们看上去卡顿.