11.离屏渲染

一: 什么是离屏渲染

如果要爱屏幕上显示内容,我们需要一块至少和屏幕数据量一样大的FrameBuffer作为像素数据的缓存区域,也是GPU储存渲染结果的地方. 如果有时面临一些限制,无法把渲染结果直接写入FrameBuffer而是存在别的区域之后再写入FrameBuffer这个过程就是离屏渲染

App -> OffscreenBuffer -> FrameBuffer

二: CPU离屏渲染

• UIView中实现了drawRect就算内部没有实际代码,系统也会为这个view申请一片内存区域等待CoreGraphics可能的绘画操作

• 很多人对于开一块CGContext来画图的操作也成为离屏渲染,因为数据是存入了CGContext而不是FrameBuffer

• 进一步讲其实所有CPU进行的光栅化操作(文字渲染,图片解码)都无法直接绘制到有GPU管理的FrameBuffer中,只能暂时放在另一块内存中

• 但是苹果工程师说CPU渲染并非真正意义的离屏渲染

  • https://lobste.rs/s/ckm4uw/performance_minded_take_on_ios_design#c_itdkfh

  • 实现DrawRect打开Xcode调试的“Color offscreen rendered yellow”开关,该区域不会变黄

三: GPU渲染

画家算法

主要渲染操作都是由CoreAnimation和Render Server模块通过调用显卡驱动提供的接口OpenGL/Metal来执行的

• 对于每一层Layer,Render Server会按照深度排序依次输出到FrameBuffer

• 后一层覆盖前一层,达到最终效果

• 此过程不可逆

  • 遮住的部分数据永久丢失无法修改

• 想要突破这个限制

  • 在FrameBuffer外开辟一块空间

  • 把待处理的Layer画上去

  • 进行修改后再写回FrameBuffer

GPU离屏渲染

• 上面开辟空间渲染,真个过程就算离屏渲染

• 对于每层Layer如果能通过单次遍历即可完成渲染的话效率最高

  • 否则只能开辟离屏Buffer来完成一些复杂操作

四: 常见离屏渲染场景

4.1 cornerRadius+clipsToBounds

• 如果只是设置cornerRadius,而不剪切内容,或者只裁掉矩形区域以外的内容,并不会触发离屏渲染

4.2 shadow

• 阴影的形状未必是矩形

• 只能在Layer以上的内容全部渲染完成后才能知道形状是什么

  • 这样只能离屏渲染,将上层内容渲染完成,知道了shadow的形状,将shadow添加到FrameBuffer

  • 再把内容回执上去

  • 如果事先告诉了CoreAnimation(通过shadowPath)阴影的几何形状的话就不需要依赖Layer了

4.3 group opacity

• 两个带透明度的图层叠加

• 叠加部分无法通过一次遍历即完成

• 会触发离屏渲染

4.4 mask

• 作用在Layer所有子Layer之上的而且可能有透明度

• 离屏渲染

4.5 UIBlurEffect

• 无法一次遍历完成

4.6 allowsEdgeAntialiasing 抗锯齿

• 无法一次遍历完成

4.7 UIButton & UIImageView

• UIButton

  • 默认自带背景图层

  • 切圆角会有离屏渲染

// clipsToBounds = YES 有
- (UIButton *)bgImageButton {
    if (!_imageButton) {
        _imageButton = [[UIButton alloc] init];
        [_imageButton setBackgroundImage:[UIImage imageNamed:@"bg_image"] forState:UIControlStateNormal];
        _imageButton.layer.cornerRadius = 15;
        _imageButton.contentMode = UIViewContentModeScaleAspectFill;
        _imageButton.clipsToBounds = YES;
    }
    return _imageButton;
}

// clipsToBounds = YES 有
- (UIButton *)imageButton {
    if (!_bgImageButton) {
        _bgImageButton = [[UIButton alloc] init];
        [_bgImageButton setImage:[UIImage imageNamed:@"bg_image"] forState:UIControlStateNormal];
        _bgImageButton.layer.cornerRadius = 15;
        _bgImageButton.contentMode = UIViewContentModeScaleAspectFill;
        _bgImageButton.clipsToBounds = YES;
    }
    return _bgImageButton;
}

- (UIButton *)colorButton {
    if (!_colorButton) {
        _colorButton = [[UIButton alloc] init];
        [_colorButton setBackgroundColor:[UIColor greenColor]];
        _colorButton.layer.cornerRadius = 15;
        _colorButton.clipsToBounds = YES;
        // 不加 title 就没有
        [_colorButton setTitle:@"Ryukie" forState:UIControlStateNormal];
    }
    return _colorButton;
}

• UIImageView

  • 默认无背景图层

  • 默认情况下直接图片切圆角不会触发离屏渲染

  • 如果内部加了子视图会离屏渲染

// 没有
- (UIImageView *)imageView {
    if (!_imageView) {
        _imageView = [[UIImageView alloc] init];
        _imageView.image = [UIImage imageNamed:@"bg_image"];
        _imageView.layer.cornerRadius = 15;
        _imageView.clipsToBounds = YES;
    }
    return _imageView;
}

// 有
- (UIImageView *)imageView {
    if (!_imageView) {
        _imageView = [[UIImageView alloc] init];
        _imageView.image = [UIImage imageNamed:@"bg_image"];
        _imageView.layer.cornerRadius = 15;
        _imageView.clipsToBounds = YES;
        
        UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
        redView.backgroundColor = [UIColor redColor];
        [_imageView addSubview:redView];
    }
    return _imageView;
}

五: GPU离屏渲染性能影响

• GPU操作是高度流水线化的.正常情况一直在向FrameBuffer中输出

• 当需要开启另一块内存进行其他操作,要暂时停止向FrameBuffer中输出,进行相关操作

• 完成后再向FrameBuffer中输出内容

TableView/CollectionView中滚动每一帧变化都会触发重绘 一旦发生离屏渲染,上面的切换操作将会发生很多次(60/s)

六: 利用离屏渲染

6.1 只离屏渲染一次

• CALayer的shouldRasterize属性

  • 可以把Layer及其子Layer,还有圆角等内容保存在内存中

  • 下一帧可以服用,而不会继续触发离屏渲染

  • 注意

    • 如果本来就不复杂,也没有圆角等,打开反而会触发一次不必要的离屏渲染

    • 缓存有限,不会超过屏幕总像素的2.5倍

    • 超过100ms没用就被释放

    • 静态内容,如果有resize或动画的话就失效了,需要重新离屏渲染

      • 针对这种情况，Xcode提供了“Color Hits Green and Misses Red”的选项，帮助我们查看缓存的使用是否符合预期

  • 除了用来优化离屏渲染还可以用于展示十分复杂的Layer

七: 什么时候需要CPU渲染

• 渲染新能调优核心在于

  • 平衡CPU&GPU的负载

  • 让他们各自做自己擅长的事情

• 文字(CoreText使用CoreGraphics渲染)图片(ImageIO)的渲染

  • GPU不擅长这些事情

  • 需要CPU处理完再交给GPU

    • 例如:

    • 一个圆角实现

      • 用CoreGraphics给图片加圆角-CPU完成

      • 这样就不用给容器设置cornerRadius避免可能发生的离屏渲染

• 注意点:

  • 渲染不是CPU强项,调用CoreGraphics会消耗一定的计算时间,因此CPU渲染放在后台线程去完成,然后回到主线程将结果返回给CoreAnimation.但是多线程间数据同步会增加一定的复杂度

    • 也是AsyncDisplayKit/Texture的主要思想

  • CPU渲染速度慢,适合不复杂的元素

    • 没有硬件加速的视频解码...酸爽啊

  • 渲染结果bitmap数据量较大(一般为解码后的UIImage),需要及时释放

  • 选择用CPU渲染的话就没必要触发GPU的离屏渲染,否则会有两块相同内存

  • 善用工具进行检测

八: 优化

• 使用AsyncDisplayKit/Texture框架

• 图片圆角

  • 采用不适用容器裁剪的方式,用上面提到过的预处理图片的方式

• 视屏圆角

  • 创建四个弧形Layer盖住四个角

  • 图片也可以

• View的圆形边框

  • 如果没有backgroundColor可以使用cornerRadius来做

• 阴影

  • 使用shadowPath

• 特殊形状View

  • 使用layer mask并打开shouldRasterize来对渲染结果进行缓存

• 模糊

  • 不采用系统提供的UIVisualEffect，而是另外实现模糊效果（CIGaussianBlur），并手动管理渲染结果

九: 总结

CPU渲染虽然也是“离屏”，但是通常提到的离屏渲染是发生在GPU 如果一个layer无法在一次遍历就完成绘制，那么就不得不触发离屏渲染 离屏渲染的开销主要在与frame buffer与离屏buffer之间的上下文切换。如果无法避免，也可以通过有效利用shouldRasterize，减少触发的次数 CPU和GPU是相互扶持的关系。CPU渲染效率不高，但是较为通用灵活；GPU擅长并行计算，但也有捉襟见肘之时，此时CPU可以适当给与帮助

参考

https://medium.com/@jasonyuh/关于离屏渲染的深入研究-e776f56b3e60 https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/