Links

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渲染

画家算法

主要渲染操作都是由CoreAnimationRender 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/