iOS离屏渲染

2020-04-29 本文已影响0人 chernyog

一、界面渲染

RunLoop异步消息事件循环以60fps（1/60≈16.7ms）的频率刷新屏幕，view由CPU绘制，GPU渲染，最后显示在屏幕上。如果整个绘制过程在16.7ms内完成，屏幕不会卡顿，否则就会出现丢帧的问题，页面卡顿明显，影响体验。

视图渲染过程简介

UIView的主layer的content属性指向一块缓存（backing store），调用drawRect()方法绘制，数据通过context传递写入缓存
CPU 计算好显示内容提交到 GPU，GPU 渲染完成后将渲染结果放入帧缓冲区
缓存写入完成后，下一次事件循环，将缓存的bitmap数据显示在屏幕上

二、屏幕渲染类型

On-Screen Rendering: 当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行
Off-Screen Rendering: 离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作
- 当使用圆角，阴影，遮罩的时候，图层属性的混合体被指定为在未预合成之前不能直接在屏幕中绘制，所以就需要屏幕外渲染被唤起。
- 屏幕外渲染意味着图层必须在被显示之前在一个屏幕外上下文中被渲染。
CPU中的离屏渲染

特殊离屏渲染（不在GPU中的渲染）
如果我们重写了drawRect方法，并且使用任何Core Graphics的技术进行了绘制操作，就涉及到了CPU渲染

CoreGraphic通常是线程安全的，所以可以进行异步绘制，显示的时候再放回主线程

- (void)display {
   dispatch_async(backgroundQueue, ^{
       CGContextRef ctx = CGBitmapContextCreate(...);
       // 绘制图像
       CGImageRef img = CGBitmapContextCreateImage(ctx);
       CFRelease(ctx);
       dispatch_async(mainQueue, ^{
           layer.contents = img;
       });
   });
}

三、离屏渲染

问题：离屏渲染为什么会造成屏幕卡顿？

创建新缓冲区
上下文切换
- 离屏渲染的整个过程，需要多次切换上下文环境：先是从当前屏幕切换到离屏，等到离屏渲染结束以后，将离屏缓冲区的渲染结果显示到屏幕上有需要将上下文环境从离屏切换到当前屏幕。（上下文环境的切换是要付出很大代价的。）

问题：什么情况下会造成离屏渲染？

为图层设置遮罩（layer.mask）
将图层的layer.masksToBounds / view.clipsToBounds属性设置为true
将图层layer.allowsGroupOpacity属性设置为YES和layer.opacity小于1.0
为图层设置阴影（layer.shadow *）
为图层设置layer.shouldRasterize=true
具有layer.cornerRadius，layer.edgeAntialiasingMask，layer.allowsEdgeAntialiasing的图层
<u>光栅化</u>（layer.shouldRasterize）

光栅化（shouldRasterize）

光栅化

光栅化概念：将图转化为一个个栅格组成的图像（一个几何单元（比如三角形）所覆盖的像素）

光栅化特点：每个元素对应帧缓冲区中的一像素

光栅化的作用是把图形变成一个个屏幕上的像素从而显示出来。数学上描述图形用的“点”或“线”是没有大小的。而显示器屏幕是一系列像素组成的正交网格，就好像一个个的格子一样。我们需要把这些“点”“线”用格子描述出来，因此把这个过程称作“栅格化”。

shouldRasterize = true，在其他属性触发离屏渲染的同时，会将光栅化后的内容缓存起来，如果对应的layer及其subLayers没有发生改变，在下一帧的时候可以直接复用。这将隐式的创建一个位图，各种阴影遮罩等效果也会保存到位图中并缓存起来，从而减少渲染的频度。

注意：对于经常变动的内容，这个时候不要开启，否则会造成性能的浪费。

效果图对比（设备型号：iPhone SE iOS版本：11.2.2）

1. 离屏渲染（shouldRasterize = false）

2. 离屏渲染（shouldRasterize = true）

3. 正常加载页面

问题：如何避免离屏渲染？

官方的优化

iOS 9.0 之前UIimageView和UIButton设置圆角都会触发离屏渲染。
iOS 9.0 之后UIButton设置圆角会触发离屏渲染，而UIImageView里png图片设置圆角不会触发离屏渲染，但是设置其他阴影效果之类的还是会触发离屏渲染。

开发者的优化

方法一：UIBezierPath和CAShapeLayer

// CAShapeLayer动画渲染直接提交到手机的GPU当中，内存消耗少，渲染速度快，能大大优化内存使用情况。
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
shapeLayer.opacity = 0.5;
shapeLayer.path = [UIBezierPath bezierPathWithOvalInRect:view.bounds].CGPath;
view.layer.mask = shapeLayer;

方法二：利用CoreGraphics画一个圆形上下文，然后把图片绘制上去，得到一个圆形的图片

- (UIImage *)drawCircleImage:(UIImage*)image {
    CGFloat imgWidth = image.size.width;
    CGFloat imgHeight = image.size.height;
    CGFloat side = MIN(imageWidth, imageHeight);
    CGFloat scale = [UIScreen mainScreen].scale;
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(side, side), false, scale);
    CGRect rect = CGRectMake(0, 0, side, side);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, [UIBezierPath bezierPathWithOvalInRect: rect].CGPath);
    CGContextClip(context);
    CGFloat marginX = -(image.size.width - side) * 0.5;
    CGFloat marginY = -(image.size.height - side) * 0.5;
    [image drawInRect:CGRectMake(marginX, marginY, imageWidth, imageHeight)];
    CGContextDrawPath(context, kCGPathFillStroke);
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

方法三：使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

CGRect rect = CGRectMake(100,100,100,100);
UIImageView *imageView = [[UIImageView alloc] initWithFrame: rect];
imageView.image = [UIImage imageNamed:@"myImg"];
// 开始对imageView进行画图
CGRect bounds = imageView.bounds;
UIGraphicsBeginImageContextWithOptions(bounds.size,NO,1.0);
// 使用贝塞尔曲线画出一个圆形图
CGFloat width = imageView.frame.size.width;
[[UIBezierPath bezierPathWithRoundedRect:bounds cornerRadius:width] addClip];
[imageView drawRect:imageView.bounds];
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
// 结束画图
UIGraphicsEndImageContext();
[self.view addSubview:imageView];

方法四：AsyncDisplayKit（异步绘制框架）

点击查看AsyncDisplayKit项目

方法五：程序员+设计师

直接让设计师把图片切成圆角进行显示
尽量使用不包含透明（alpha）通道的图片资源
用户上传图片，可以让服务端处理圆角

效果对比

0. None

None

1. layer

layer

2. shapeLayer

shapeLayer

3. bezierPath + CaShapeLayer

bezierPath + CAShapeLayer

4. coreGraphics

coreGraphics

5. bezierPath + CoreGraphics

bezierPath + CoreGraphics