iOS 2D Graphic(3)—— Offscreen Rendering离屏渲染

前言

在本系列文章的前两篇中,我们已经了解了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看到不同的状态下整个页面中参与离屏渲染的范围。

shadowTest.gif

总结

至此,本系列文章告一段落。我希望它们能够从基本概念开始指导你一步步的更深入的理解iOS UI 图形性能,让你在将来的工作中能够少走一些弯路。当然水平有限,欢迎大家讨论指正。

2016.8.16 完稿于南京

参考资料:
Mastering UIKit Performance
简书 -《iOS 离屏渲染的研究》
简书 -《深刻理解移动端优化之离屏渲染》
简书 -《圆角绘制引发的离屏渲染》
When should I set layer.shouldRasterize to YES

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 卷首语 欢迎来到 objc.io 的第三期! 这一期都是关于视图层的。当然视图层有很多方面,我们需要把它们缩小到几...
    评评分分阅读 1,757评论 0 18
  • Core Animation工具用来监测Core Animation性能。它给我们提供了周期性的FPS,并且考虑到...
    F麦子阅读 819评论 0 1
  • README: 引言: 一款优秀的app,流畅很关键,用户使用60的fps的app,跟使用30的fps的app感受...
    uncleRX阅读 30,557评论 31 236
  • 2017-4-29 今天晚上和班上的同学排练班级风采大赛的节目。七点左右,下起了小雨。雨越下越大,班上共四十多个人...
    瑶鬼阅读 194评论 0 0
  • 《心有南安,唯是心安》第一章 心动
    清柠学姐阅读 410评论 4 7