iOS-离屏渲染详解

README:

引言: 一款优秀的app,流畅很关键,用户使用60的fps的app,跟使用30的fps的app感受是完全不一样的.类似于 半糖 这种优秀的应用肯定花了大把精力去优化界面.网上关于优化的界面的文章一搜一大把.本文并不是讲界面优化的,优化的话推荐下面几篇文章;

YYKit作者: "iOS 保持界面流畅的技巧" (我相信认真看一定有收获!)

离屏渲染的优化 (这篇文章很强)

jim: 浅谈iOS中的视图优化

有些东西研究起来挺费劲的.但是想要更多的收获,还真就必须得研究.知识零零散散,时间久了再次用起来难免会生疏,又得重新找资料,看文章.很麻烦.索性就整理个比较全面的知识点供以后复习.


  • 屏幕渲染

  • OpenGL中,GPU屏幕渲染有两种方式.
  1. On-Screen Rendering (当前屏幕渲染)

    指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区进行.

  2. Off-Screen Rendering (离屏渲染)

    指的是在GPU在当前屏幕缓冲区以外开辟一个缓冲区进行渲染操作.

几个名词 "GPU" " 缓冲区" .

不知道GPU的就自行百度吧 (- - 宝宝说不清). 说下缓冲区.要明白缓冲区,首先就得要知道图像显示出来的原理,本文的第一篇博客里面介绍的很详细.
显示器 显示出来的图像是经过 CRT电子枪一行一行的扫描.(可以是横向的也可以是纵向 ,具体CRT电子枪又是什么,百度文库介绍的很详细.),扫描出来就呈现了一帧画面,随后电子枪又会回到初始位置循环扫描,为了让显示器的显示跟视频控制器同步,当电子枪新扫描一行的时候.准备扫描的时候,会发送一个 水平同步信号(HSync信号),而当一帧画面绘制完成后,电子枪回复到原位,准备画下一帧前,显示器会发出一个垂直同步信号(vertical synchronization简称 VSync),显示器一般是固定刷新频率的,这个刷新的频率其实就是VSync信号产生的频率. 然后CPU计算好frame等属性,就将计算好的内容提交给GPU去渲染,GPU渲染完成之后就会放入帧缓冲区,然后视频控制器会按照VSync信号逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器.就显示出来了.
原理图就不放了,过一遍概念.

离屏渲染的代价很高,想要进行离屏渲染,首选要创建一个新的缓冲区,屏幕渲染会有一个上下文环境的一个概念,离屏渲染的整个过程需要切换上下文环境,先从 当前屏幕切换到离屏,等结束后,又要将上下文环境切换回来.这也是为什么会消耗性能的原因了.
。由于垂直同步的机制,如果在一个 VSync 时间内,CPU 或者 GPU 没有完成内容提交,则那一帧就会被丢弃,等待下一次机会再显示,而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。


那有个问题: 为什么离屏渲染这么耗性能,为什么有这套机制呢?

当使用圆角,阴影,遮罩的时候,图层属性的混合体被指定为在未预合成之前(下一个VSync信号开始前)不能直接在屏幕中绘制,所以就需要屏幕外渲染。 你可以这么理解. 老板叫我短时间间内做一个 app.我一个人能做,但是时间太短,所以我得让我朋友一起来帮着我做.(性能消耗: 也就是耗 你跟你朋友之间沟通的这些成本,多浪费啊).但是没办法 谁让你做不完呢.
这么一讲会不会比较明白点.


  • 哪些操作会触发 离屏渲染?

官方公开的的资料里关于离屏渲染的信息最早是在 2011年的 WWDC, 在多个 session 里都提到了尽量避免会触发离屏渲染的效果,包括:mask, shadow, group opacity, edge antialiasing。

  • shouldRasterize(光栅化)

  • masks(遮罩)

  • shadows(阴影)

  • edge antialiasing(抗锯齿)

  • group opacity(不透明)

  • 复杂形状设置圆角等

  • 渐变

  • Text(UILabel, CATextLayer, Core Text, etc)...


介绍一些属性.

  • shouldRasterize(光栅化): 将图转化为一个个栅格组成的图象。 光栅化特点:每个元素对应帧缓冲区中的一像素。

shouldRasterize = YES在其它属性触发离屏渲染的同时,会将光栅化后的内容缓存起来,如果对应的layer或者 sublayers没有发生改变,在下一帧的时候可以直接复用,从而减少渲染的频率.
当使用光栅化是, 可以开启 "Color Hits Green and Misses Red"来检查该场景下是否适合选择光栅化,绿色表示缓存被复用,红色表示缓存在被重复创建.对于经常变动的内容,不要开启,否则会造成性能的浪费.

如果cell里面的内容不断变化(cell的复用),如果设置了cell.layer.shouldRaseterize = YES则会降低图形性能,造成离屏渲染.

  • mask(遮罩).

mask是layer的一个属性.

/ A layer whose alpha channel is used as a mask to select between the
 * layer's background and the result of compositing the layer's
 * contents with its filtered background. Defaults to nil. When used as
 * a mask the layer's `compositingFilter' and `backgroundFilters'
 * properties are ignored. When setting the mask to a new layer, the
 * new layer must have a nil superlayer, otherwise the behavior is
 * undefined. Nested masks (mask layers with their own masks) are
 * unsupported. */

@property(nullable, strong) CALayer *mask;

大概的意思. 当透明度改变的时候,这个 mask 就是覆盖上去的那个阴影.该层的layer的alpha决定了多少层背景跟内容通过并显示,完全,或者部分不透明的像素允许潜在的内容 通过并显示.
默认是nil,当配置一个 遮罩的时候,记得设置 遮罩的大小,位置.已确保跟盖图层对齐.(这是官方文档说的 如果不对齐会怎样.you can try. 我试过是只能显示对齐的那一部分.)
如果你想给这个属性赋值,前提是必须没有 superLayer,如果有superLayer,这个行为则是无效的.(你也可以尝试一下反的.)

tip:用mask可以做一些转场动画.这里就不介绍了.

那说了这么多,他就是生来会触发离屏渲染的.所以要谨慎 设置透明度. 提到透明度,另外补充一个概念.)

Color Blended Layers
用jim的话来介绍它就是

屏幕上的每个像素点的颜色是由当前像素点上的多层layer(如果存在)共同决定的,GPU会进行计算出混合颜色的RGB值,最终显示在屏幕上。而这需要让GPU计算,所以我们要尽量避免设置alpha,这样GPU会忽略下面所有的layer,节约计算量。再提一下opaque这个属性,网上普遍认为view.opaque = YES,GPU就不会进行图层混合计算了。而这个结论是错误的,其实view.opaque事实上并没什么卵用。
如果你真的想达到这个效果,可以用layer.opaque,这个才是正确的做法

  • shadows(阴影.)
    略过.... (自己可以随便尝试一下)

再介绍一下edge antialiasing(抗锯齿) 这个吧. 因为之前自己也没接触过,很多人估计也是没接触过吧.

177286BA-E7BE-4CFE-B992-AF18B30FE1DE.png

翻译:

是否允许执行反锯齿边缘。
默认的值是 NO.(不使用抗锯齿,也有人叫反锯齿),当 Value 为YES的时候, 在layer的 edgeAntialiasingMask属性layer依照这个值允许抗锯齿边缘,(参照这个值) 可以在info.plist里面开启这个属性.


0068582C-92E8-4A80-AAD8-C89E22668964.png

放一个 plist 常见的key值表 info.plist配置表 (楼主真的好...)

说了这么多. 那抗锯齿又是啥????

抗锯齿的概念 (随便看看.)
在我们iOS中表现 参考这里


    CALayer *layer = [CALayer layer]; 
    layer.position = CGPointMake(100, 100);
    layer.bounds = CGRectMake(0,0, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    //layer.allowsEdgeAntialiasing = YES;
    [self.view.layer addSublayer:layer]; 

正常添加layer 在view上是这样的.

模拟器不旋转.png

下一步.

 CGFloat angle = M_PI / 30.0;
[layer setTransform:CATransform3DRotate(layer.transform, angle, 0.0, 0.0, 1.0)];

在模拟器表现是这样的.

模拟器NO.png

如果 layer.allowsEdgeAntialiasing = YES;

--- 在模拟器上是

模拟器YES.png

--- 在真机上.

真机YES.png

可见真机效果跟模拟器还是有差距的,(模拟器边缘比真机模糊,)官方文档也有提到这点

Use antialiasing when drawing a layer that is not aligned to pixel boundaries. This option allows for more sophisticated rendering in the simulator but can have a noticeable impact on performance.

这是UIView的抗锯齿,在模拟器上还是有性能的消耗的.

看看效果就行,具体的不研究太多了,知道怎么避免就行.


  • group opacity(不透明)
组不透明.png

大概的意思就是 这个属性决定了Core Animation框架下 子layers从他们Superlayer.继承过来的不透明度.
iOS 6之前是默认NO,iOS7以后就默认 是YES. 文档也是说可以在模拟器上呈现.但是对性能有明显的影响.
这里我就不测试了.这个属性过一遍,重点是下一个属性.


  • 复杂形状设置圆角.

我们在开发中经常会对一些图片或者按钮进行圆角处理,需求还是特别多的,设置圆角有多种方法,我列一下常见的方式.

  1. 设置layer层的圆角大小.经常我们还会设置masksToBounds,
//按正方形来算.长的一半就是半径.按照这个去设置就是圆角了,长方形的话则按短的那一边
_imageView.layer.cornerRadius = iamgeView.width/2;
_imageView.layer.masksToBounds = YES;

这样做对于少量的图片,这个没有什么问题,但是数量比较多的时候,UITableView滑动可能不是那么流畅,屏幕的帧数下降,影响用户体验。

  1. 使用layer的mask遮罩和CAShapLayer
    创建圆形的CAShapeLaer对象,设置为View的mask属性,这样也可以达到圆角的效果,但是前面提到过了,使用mask属性会离屏渲染,不仅这样,还曾加了一个 CAShapLayer对象.着实不可以取.

  2. 使用带圆形的透明图片.(求个切图大师 - - ).

  3. CoreGraphics自定义绘制圆角.

提到CoreGraphics,还有一种 特殊的"离屏渲染"方式 不得不提,那就是drawRect方法.触发的方式:
如果我们重写了 drawRect方法,并且使用CoreGraphics技术去绘制.就设计到了CPU渲染,整个渲染,由CPU在app内同步完成,渲染之后再交给GPU显示.(这种方式对性能的影响不是很高)

tip:CoreGraphic通常是线程安全的,所以可以进行异步绘制,然后在主线程上更新.

- (void)display {
   dispatch_async(backgroundQueue, ^{
       CGContextRef ctx = CGBitmapContextCreate(...);
       CGImageRef img = CGBitmapContextCreateImage(ctx);
       CFRelease(ctx);
       dispatch_async(mainQueue, ^{
           layer.contents = img;
       });
   });
}
  • 如何检测我的项目里面离屏渲染了

  • 之前看了一些文章说在intruments里面的 CoreAnimation里面有工具.检测.(没找着.求补充)

打开的正确方式:
模拟器的 debug -> 选取 color Offscreen-Rendered.

BB55F33F-97CC-4C28-B3F1-22456A2A7BD8.png

开启后会把那些需要离屏渲染的图层高亮成黄色,这就意味着黄色图层可能存在性能问题。

正常:是这样的


正常渲染.png

有问题的图层:

调试.png

可以看见我设置了圆角的imageView有问题.

项目开发中怎么去处理?

抛出一个问题: 需求就是有很多圆角那我们项目中应该怎么去处理圆角呢?

  1. 使用YYWebImage去处理
  2. iOS中圆角图片的处理

相信看完两篇文章,多少都会能收获一点!

有些人说:

iOS 9.0 之后UIButton设置圆角会触发离屏渲染,而UIImageView里png图片设置圆角不会触发离屏渲染了,如果设置其他阴影效果之类的还是会触发离屏渲染的(这句话不知道谁说的.自己有没有去尝试呢???)

结论: 经过测试

70915C7C-7523-4008-9A88-B5682407926D.png

大家可以看到,
UIButton 的 masksToBounds = YES下发生离屏渲染与 背景图存不存在有关系, 如果没有给按钮设置 btn.image = [UIImage imageName:@"xxxxx"]; 是不会产生离屏渲染的 .

关于 UIImageView,现在测试发现(现版本: iOS10),在性能的范围之内,给UIImageView设置圆角是不会触发离屏渲染的,但是同时给UIImageView设置背景色则肯定会触发.触发离屏渲染跟 png.jpg格式并无关联(可能采取的压缩格式不同,这里不做探讨,这里我给出结果是没有关系)


  • 总结:

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

推荐阅读更多精彩内容