iOS 常见触发离屏渲染场景及优化方案总结

以下方案,常用的阴影、圆角等经过笔者测试可行,剩余场景方案仅供参考,并未实际测试

对什么是离屏渲染,以及为什么会产生离屏渲染尚不了解的建议看看四、深入剖析【离屏渲染】原理这篇文章,再来阅读本文

在离屏渲染触发的场景中,按照性能影响从高到低排序,如下所示

  • shadows(阴影)
  • conerRadius > 0 + maskToBounds = true(常见的圆角设置手段)
  • mask(遮罩)
  • allowsGroupOpacity(组不透明)
  • edge antialiasing(抗锯齿)

下面针对不同场景说明为什么以及怎么解决离屏渲染问题

添加了阴影的layer(layer.shadow)

  • layer本身是一块矩形区域,而阴影是作用于在整个非透明区域,并显示在所有layer的最下方。
  • 根据画家算法,由远及近的渲染,阴影是第一个被渲染的,但是阴影渲染有一个前提:我们必须画完所有的layer和子layer后。
  • 所以这时我们就需要一个临时缓存,这个缓存区就是离屏缓冲区,用来将所有layer都渲染完成,再根据所有layer和子layer组合后的图层的形状,添加阴影到FrameBuffer,最后显示到屏幕上

下面我们以按钮的阴影来进行演示

        let btn0 = UIButton(type: .custom)
        btn0.frame = CGRect(x: 100, y: 60, width: 100, height: 100)
        //设置圆角
        self.view.addSubview(btn0)
        //设置背景图片
        btn0.setImage(UIImage(named: "mouse"), for: .normal)
        //阴影
        btn0.layer.shadowColor = UIColor.lightGray.cgColor
        btn0.layer.shadowOpacity = 1.0
        btn0.layer.shadowRadius = 2.0
        btn0.layer.shadowOffset = CGSize(width: 5, height: 5)

根据上面这段代码的运行,可以看到如下结果,设置阴影时是触发了离屏渲染的
shadow离屏渲染效果

优化方案
使用阴影必须保证 layer 的masksToBounds = false,因此阴影与系统圆角不兼容。但是注意,只是在视觉上看不到,对性能的影响依然。通常使用指定路径来避免离屏渲染

  • 方案1:指定路径
    在上述代码的基础上增加以下两行代码
        //指定路径 - 避免离屏渲染
        let path = UIBezierPath(rect: btn0.bounds)
        btn0.layer.shadowPath = path.cgPath

效果如下
shadow避免离屏渲染的结果

除了指定路径,还有其他解决方案,不过笔者并没有一一试验,有兴趣的可以自己尝试下

  • 利用混合图层模拟阴影的效果
sublayer.contents = (id)[UIImage imageNamed:@"xxx"].CGImage;
[view.layer addSublayer:sublayer];
  • 利用一个阴影效果的视图添加在需要显示阴影的位置
  • 使用 Core Graphics 绘制阴影

需要进行裁剪的layer(layer.masksToBounds / view.clipsToBounds)

这种场景就是我们常用的圆角处理,当我们需要绘制一个带有圆角并且需要剪切圆角以外内容的容器时,就会触发离屏渲染,例如UIButton、UIImageView等

注意:iOS官方针对UIImageView有一些优化,
==> 在iOS9之前,UIImageView和UIButton通过cornerRadius+masksToBounds设置圆角都会触发离屏渲染,
==> 但是UIImageView在ios9以后,针对UIImageView中的image设置圆角并不会触发离屏渲染,如果加上了背景色或者阴影等其他效果还是会触发离屏渲染的

优化方案
对于content无内容或者内容非背景透明(不涉及到圆角以外的区域)的layer,直接设置layer的backgroundColor + cornerRadius 属性绘制圆角

常用的优化方案参见iOS 常用的圆角处理方式总结

下面再补充一些其他方案

  • 后台绘制,前台设置图片
- (void)setCircleImage
{
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        UIImage * circleImage = [image imageWithCircle];
        dispatch_async(dispatch_get_main_queue(), ^{
            imageView.image = circleImage;
        });
    });
}


#import "UIImage+Addtions.h"
@implementation UIImage (Addtions)
//返回一张圆形图片
- (instancetype)imageWithCircle
{
    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, self.size.width, self.size.height)];
    [path addClip];
    [self drawAtPoint:CGPointZero];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
  • 使用混合图层,在layer上方叠加相应mask形状的半透明layer
sublayer.contents = (id)[UIImage imageNamed:@"xxx"].CGImage;
[view.layer addSublayer:sublayer];

使用了mask的layer(layer.mask)

  • mask是覆盖在所有layer及其子layer之上的,可能还带有一定的透明度。
  • mask也是需要等整个layer树绘制完成,再加上mask和组合后的lzyer进行组合,所以需要开辟一个独立于FrameBuffer的内存,用于将layer及其子layer画完,最后再和mask进行组合,存储到FrameBuffer,视频控制器从FrameBuffer中读取数据显示到屏幕上

优化方案

  • 不使用mask,使用混合图层,在layer上方叠加相应mask形状的半透明layer

设置了组透明度为 YES,并且透明度不为 1 的 layer (layer.allowsGroupOpacity/ layer.opacity)

  • group opacity中alpha并不是分别应用到每一层之上,需要整个layer树画完之后,在统一加上alpha,和底层其他layer的像素进行组合,此时显然无法通过一次遍历就得到结果
  • 需要另外开启一个独立内存,先将layer及其子layer画好,最后给组合后的图层加上alpha进行渲染,将最终结果存储到帧缓冲区
  • GroupOpacity 开启离屏渲染的条件是:layer.opacity != 1.0并且有子 layer 或者背景图。

优化方案
关闭allowsGroupOpacity属性,根据产品需求自己控制layer透明度

采用了光栅化的 layer (layer.shouldRasterize)

如果layer的layer.shouldRasterize被设置为true,会在触发离屏渲染的同时,将光栅化后的内容缓存起来,如果在下一次,对应的layer和子layer没有改变,则复用离屏缓冲区的结果,可以很大程度提升性能

  • 当视图内容是静态不变时,设置 shouldRasterize(光栅化)为YES,此方案最为实用方便。
view.layer.shouldRasterize = true;
view.layer.rasterizationScale = view.layer.contentsScale;

  • 但当视图内容是动态变化(如后台下载图片完毕后切换到主线程设置)时,使用此方案反而为增加系统负荷。

绘制了文字的 layer (UILabel, CATextLayer, Core Text 等)

想要在 UILabel 和 UITextView 上实现低成本的圆角(不触发离屏渲染),需要保证 layer 的contents呈现透明的背景色,文本视图类的 layer 的contents默认是透明的(字符就在这个透明的环境里绘制、显示),此时只需要设置 layer 的backgroundColor,再加上cornerRadius就可以搞定了。不过 UILabel 上设置backgroundColor的行为被更改了,不再是设定 layer 的背景色而是为contents设置背景色,UITextView 则没有改变这一点

  • 不要直接利用label.backgroundColor = aColor 设置背景色
  • 不要直接在XIB中为label设置背景色

优化方案
直接通过label的layer设置背景色 + cornerRadius

label.layer.backgroundColor = aColor
label.layer.cornerRadius = 5

使用高斯模糊(毛玻璃)效果

ios屏幕显示推送通知页面或者UIVisualEffectView

edge antialiasing(抗锯齿)

不设置 allowsEdgeAntialiasing 属性为YES(默认为NO)

总结

  • RoundedCorner(圆角) 在仅指定cornerRadius时不会触发离屏渲染,仅适用于特殊情况:contents为 nil 或者contents不会遮挡背景色时的圆角。
  • Shawdow 可以通过指定路径来取消离屏渲染。
  • Mask 无法取消离屏渲染,可以利用混合图层来进行优化。

猜你喜欢

转载自blog.csdn.net/lin1109221208/article/details/107341640