iOS离屏渲染

一: 什么是离屏渲染

如果要爱屏幕上显示内容,我们需要一块至少和屏幕数据量一样大的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来完成一些复杂操作

四: 常见离屏渲染场景

cornerRadius+clipsToBounds

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

shadow

• 阴影的形状未必是矩形
• 只能在Layer以上的内容全部渲染完成后才能知道形状是什么
  • 这样只能离屏渲染,将上层内容渲染完成,知道了shadow的形状,将shadow添加到FrameBuffer
  • 再把内容回执上去
  • 如果事先告诉了CoreAnimation(通过shadowPath)阴影的几何形状的话就不需要依赖Layer了

group opacity

• 两个带透明度的图层叠加
• 叠加部分无法通过一次遍历即完成
• 会触发离屏渲染

mask

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

UIBlurEffect

• 无法一次遍历完成

allowsEdgeAntialiasing 抗锯齿

• 无法一次遍历完成

五: GPU离屏渲染性能影响

• GPU操作是高度流水线化的.正常情况一直在向FrameBuffer中输出
• 当需要开启另一块内存进行其他操作,要暂时停止向FrameBuffer中输出,进行相关操作
• 完成后再向FrameBuffer中输出内容

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

六: 利用离屏渲染

只离屏渲染一次

• 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/