关于iOS离屏渲染的深入研究

1.离屏渲染是什么

首先我们要知道图像渲染的基本原理：由CPU计算好显示内容，GPU 渲染完成后将渲染结果放入帧缓冲区，随后视频控制器会按照 HSync 信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示。

如果在当前用于显示的屏幕缓冲区中进行渲染操作，那就是当前屏幕渲染，如果是在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作，那就是离屏渲染。

2.如何触发离屏渲染

我们经常看到，圆角会触发离屏渲染。以最近做的IM项目举例，在聊天列表页，每个cell的头像都得切圆角，如果使用以下方式：

imageView.backgroundColor = [UIColor whiteColor];
imageView.layer.cornerRadius = 25;
imageView.layer.masksToBounds = YES;

当数据量较大的时候，快速滑动必然会触发卡顿，我们可以在xcode中打开模拟器的 debug -> 选取 color Offscreen-Rendered，进行离屏渲染检测：

这里我们通过一个demo来进行测试：

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
[self.view addSubview:view1];
// 背景色
view1.backgroundColor = UIColor.redColor;
// 边框
view1.layer.borderWidth = 2;
view1.layer.borderColor = UIColor.blackColor.CGColor;
// 圆角
view1.layer.cornerRadius = 50;

 我们可以看到，这里虽然设置了cornerRadius，但是并没有触发离屏渲染。当我们开启layer.masksToBounds或者clipsToBounds时，依然不会触发。

但是如果我们在这个红色的view1上，再添加一个view2，并且将view1开启maskToBounds:

　　 UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100.0, 100.0)];
    [self.view addSubview:view1];
    // 背景色
    view1.backgroundColor = UIColor.redColor;
    // 边框
    view1.layer.borderWidth = 2;
    view1.layer.borderColor = UIColor.blackColor.CGColor;
    // 圆角
    view1.layer.cornerRadius = 50;
    view1.layer.masksToBounds = YES;
    
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
    [view1 addSubview:view2];
    // 背景色
    view2.backgroundColor = UIColor.greenColor;

离屏渲染出现了：

 3.离屏渲染出现的原因

• CALayer产生GPU离屏渲染

首先来看一下CALayer的层次结构，CALayer由背景色backgroundColor、内容contents、边缘borderWidth&borderColor构成，如下图所示：

计算机图形学里讲过一个词“油画家算法”，即先绘制场景中的离观察者较远的物体，再绘制较近的物体。而图层的绘制基本遵循这一原则。

当我们设置了cornerRadius以及masksToBounds进行圆角+裁剪时，masksToBounds裁剪属性会应用到所有的图层，本来我们的绘制过程，应该是绘制一个图层丢弃一个图层，但现在contents中有了内容，那就需要在离屏缓冲区中保存，等待圆角+裁剪处理，即引发了 离屏渲染 。

除了cornerRadius+masksToBounds以外，还有以下几种情况也会触发离屏渲染：

• 开启shadows（阴影）
• 毛玻璃效果
• mask（遮罩）
• allowsGroupOpacity（组不透明）

当 CALayer 使用圆角，阴影，遮罩等属性的的时候，图层属性的混合体被指定为在未预合成之前不能直接在屏幕中渲染，则过程中需要进行离屏渲染。
实际项目中主要由Core Graphics API(核心绘图)的使用导致。

 

 4.离屏渲染的优化方案

实际开发中，当视图内容是静态不变时，可以通过设置 shouldRasterize(光栅化)为YES，当我们开启光栅化后，会在首次产生一个位图缓存，当再次使用时候就会复用这个缓存。但是如果图层发生改变的时候就会重新产生位图缓存，所以这个功能一般不能用于UITableViewCell中。

最彻底的解决办法，就是把需要显示的图形在后台线程绘制为图片，避免使用圆角、阴影、遮罩等属性。

• 例如使用CAShapeLayer和UIBezierPath设置圆角

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];

imageView.image = [UIImage imageNamed:@"myImg"];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];

//设置大小

maskLayer.frame = imageView.bounds;

//设置图形样子

maskLayer.path = maskPath.CGPath;

imageView.layer.mask = maskLayer;

[self.view addSubview:imageView];

感兴趣的同学可以阅读一下Google开源的AsyncDisplayKit（现在迁移到Texture），一个用于保持界面流畅的库，以后有时间我再详细的介绍和分析一下这个库。