前言
在本系列文章的前两篇中,我们已经了解了iOS Graphic相关的基本概念和影响Graphic性能的诸多因素和优化方案。在** “动画平滑性优化” **一节中,当时指出了“离屏渲染(Offscreen Rendering)”这个概念。
离屏渲染,顾名思义,是指当前屏幕的绘制操作并不是直接发生在当前的帧缓冲区内,而是会合并/渲染图层树的一部分到一个新的缓冲区,然后该缓冲区被渲染到屏幕上。产生离屏渲染的原因有很多,它可以被 Core Animation 自动触发,也可以被应用程序强制触发。当图层属性的混合体被指定为在未预合成之前不能直接在屏幕中绘制时,屏幕外渲染就被唤起了。屏幕外渲染并不意味着软件绘制,但是它意味着图层必须在被显示之前在一个屏幕外上下文(Context)中被渲染(不论CPU还是GPU)。
一般情况下,你需要避免离屏渲染,因为这是很大的消耗。直接将图层合成到帧的缓冲区中(在屏幕上)比先创建屏幕外缓冲区,然后渲染到纹理中,最后将结果渲染到帧的缓冲区中要廉价很多。因为这其中涉及两次昂贵的环境转换(转换环境到屏幕外缓冲区,然后转换环境到帧缓冲区)。
“狭义离屏渲染” vs. “广义离屏渲染”
“离屏渲染”本身其实是GPU的概念,但是这个概念已经被大家广泛讨论,绝大多数情况下大家讨论的已经是以中种更为广泛的理解。但是从原理上来说,我们应该还是要搞清楚它们的区别。这点Apple UIKit team的Andy Matuschak在这里明确指出了。我在这里稍作整理:
广义上:
CPU在后台进行的bitmap生成。这部分(通过drawRect并且使用任何CoreGraphics来实现的绘制,或使用CoreText[其实就是使用CoreGraphics]绘制)的确涉及到了“离屏绘制”,但是这和我们通常说的那种离屏绘制是有区别的。当你实现drawRect方法或者通过CoeGraphics绘制的时候,其实你是在使用CPU绘制。并且这个绘制的过程会在你的App内同步地进行。基本上你只是调用了一些向位图缓存内写入一些二进制信息的方法而已。狭义上:
是真正指GPU的off-sceen rendering。这种形式离屏绘制是发生在绘制服务(是独立的处理过程)并且同时通过GPU执行(这里就不是像前面提到的用CPU了)。当OpengGL的绘制程序在绘制每个layer的时候,有可能因为包含多子层级关系而必须停下来把他们合成到一个单独的缓存里。你可能认为GPU应该总是比CPU牛逼一点,但是在这里我们还是需要慎重的考虑一下。因为对GPU来说,从当前屏幕(on-screen)到离屏(off-screen)上下文环境的来回切换(这个过程必须flush管线(pipeline)和光栅(rasterizing)),代价是非常大的。因此对一些简单的绘制过程来说,这个过程有可能用CoreGraphics,全部用CPU来完成反而会比GPU做得更好。所以如果你正在尝试处理一些复杂的层级,并且在犹豫到底用-[CALayer setShouldRasterize:]还是通过CoreGraphics来绘制层级上的所有内容,唯一的方法就是测试并且进行权衡。
离屏渲染的触发
关于离屏渲染的触发条件,目前已经有很多很好的文章做出了总结,各种示例也是层出不穷,后文的参考链接里我就放了几篇很好的文章,这里就不再累述了,我只将基本条件提炼出来做一个简单的列表:
离屏渲染触发条件:
Core Graphics (any class prefixed with CG*) (CPU)
The drawRect() method, even with an empty implementation. (CPU)
CALayers with a shouldRasterize property set to YES.
CALayers using masks (setMasksToBounds) and round corner.
dynamic shadows (setShadow*).
Any text displayed on screen, including Core Text.
Group opacity (UIViewGroupOpacity).
edge antialiasing(抗锯齿)
渐变
降低离屏渲染对性能的影响
离屏渲染合成计算是非常昂贵的, 但有时你也许希望强制这种操作。那么这时某些情况下,你是可以选择不同的方式来减小性能的影响的:
阴影shadow
正如上一篇文章提到的,使用setShadowPath而不是直接使用shadow属性,会大大提升CG server的渲染性能圆角round corner
事实上,单独使用setMasksToBounds和单独设置圆角并不会触发离屏渲染,但是两者结合一定会触发离屏渲染。iOS 9.0 之前UIimageView跟UIButton设置圆角都会触发离屏渲染;iOS 9.0 之后UIButton设置圆角会触发离屏渲染,而UIImageView里png图片设置圆角不会触发离屏渲染了,如果设置其他阴影效果之类的还是会触发离屏渲染的。有时候你想显示圆角并沿着图层裁切子图层的时候,你可能会发现你并不需要沿着圆角裁切,这个情况下用CAShapeLayer就可以避免这个问题了。如果你想要的只是圆角且沿着矩形边界裁切,同时还不希望引起性能问题。其实你可以用现成的UIBezierPath的构造器+bezierPathWithRoundedRect:cornerRadius:
这样做并不会比直接用cornerRadius更快,但是它避免了性能问题。
//create shape layer CAShapeLayer *blueLayer = [CAShapeLayer layer];
blueLayer.frame = CGRectMake(50, 50, 100, 100);
blueLayer.fillColor = [UIColor blueColor].CGColor;
blueLayer.path = [UIBezierPath bezierPathWithRoundedRect:
CGRectMake(0, 0, 100, 100) cornerRadius:20].CGPath; //add it to our view
[self.layerView.layer addSublayer:blueLayer];
- 光栅化 Rasterize
这里要解释一下,使用光栅化确实会触发离屏渲染,但是并不代表一定会造成性能下降,相反,如果你必须使用drawRect等API进行绘制时,如果Layerd的内容并不经常变化,使用光栅化让CPU对绘制的内容进行bitmap缓存后反而能够显著提高性能;如果你的程序混合了很多图层,并且想要他们一起做动画,GPU 通常会为每一帧(1/60s)重复合成所有的图层。当使用离屏渲染时,GPU 第一次会混合所有图层到一个基于新的纹理的位图缓存上,然后使用这个纹理来绘制到屏幕上。现在,当这些图层一起移动的时候,GPU 便可以复用这个位图缓存,并且只需要做很少的工作。需要注意的是,只有当那些图层不改变时,这才可以用。如果那些图层改变了,GPU 需要重新创建位图缓存。比如在TableView和CollectionView中,对Cell的内容绘制完毕后进行光栅化,会使得完全处于屏幕中的Cell在滚动时会复用已经缓存的位图而不会反复绘制。如果经常变化,那么设置 shouldRasterize 是不正确的,因为这时GPU会频繁的更新缓存而让空间换时间的trade off失去意义。这就是为什么在本系列上一篇文章(2)中,我们使用手动绘制bitmap然后在drawRect中填充,而不是用shouldRasterize的原因所在。
一个小Demo
不免俗的,我也提供一个小Demo,你可以在Github找到项目的源码。
在这个Demo中,我分别针对Layer和View,使用了几种不同的增加阴影的方式,并通过开关控制,你能够看到几个不同的属性共同作用下的不同效果,尤其是圆角和阴影的配合使用方法。其次,我在一个swapView中使用了shouldRasterize,当然这是一个小Demo,所以你可能看不出这里面的性能的显著变化,但是你仍然可以配合instrument看到不同的状态下整个页面中参与离屏渲染的范围。
总结
至此,本系列文章告一段落。我希望它们能够从基本概念开始指导你一步步的更深入的理解iOS UI 图形性能,让你在将来的工作中能够少走一些弯路。当然水平有限,欢迎大家讨论指正。
2016.8.16 完稿于南京
参考资料:
Mastering UIKit Performance
简书 -《iOS 离屏渲染的研究》
简书 -《深刻理解移动端优化之离屏渲染》
简书 -《圆角绘制引发的离屏渲染》
When should I set layer.shouldRasterize to YES