三、iOS离屏渲染的原理和使用

引言:设置圆角一定会出现离屏渲染吗?

我们先看下面的四种情况,有哪些会出现离屏渲染呢

四种情况


我们运行模拟器,然后打开模拟器的Off-screen Rendered,屏幕显示黄色则表示出现离屏渲染。这里我们看到了1,3出现了离屏渲染。在解释这个问题之前我们先往下看。

运行结果

一、离屏渲染的原理和影响

1、离屏渲染产生的原因

正常渲染(遵循油画算法):APP -> Frame Buffer -> Display

图层叠加的油画算法:

图层的叠加绘制大概遵循“画家算法”。

油画算法:先绘制场景中的离观察者较远的物体,再绘制较近的物体。


油画算法


离屏渲染:APP -> Offscreen Buffer -> Display

离屏渲染的逻辑

离屏渲染产生的原因:当帧缓冲区的图片不能直接展示在屏幕上,需要经过其他的混合处理/计算(比如遮罩、半透明颜色混合),就必须把他们放到离屏缓冲区,经过计算后再展示在屏幕上。

3、离屏渲染的影响(离屏渲染会消耗性能,容易掉帧)

它要创建一个新的缓冲区(OffScreen Buffer,空间限制是屏幕像素的2.5倍),然后还需要上下文环境,在离屏渲染的整个过程中需要切换上下文环境,从当前屏幕切换到离屏,等结束后,又将上下文切换回来。

二、离屏渲染的情况和解决办法

1、圆角触发离屏渲染的真正原因

当我们设置layer.cornerRadius以及maskToBounds/clipsToBounds的时候

设置圆角

设置layer.cornerRadius只会设置backgroundcolor和border的圆角,不会设置content的圆角。如果再加上maskToBounds/clipsToBounds就会设置content的圆角。

本来遵循油画算法从后往前绘制完一个图层就可以丢弃了,但是现在因为要处理背景颜色和content的圆角(你没办法单独对content进行圆角+裁剪设置,一定是结合了所在视图的大小你才知道content要裁剪成什么样子的)

我们需要将其依次在Offscreen Buffer中保存,对混合背景颜色+content的图进行圆角处理,就触发了离屏渲染。


2、离屏渲染的其他情况

1、mask遮罩(类似毛玻璃效果)-> 使用混合图层,在layer上方叠加相应mask形状的半透明layer

2、edge antialiasing(抗锯齿) -> 不设置 allowsEdgeAntialiasing 属性为YES(默认为NO)

3. allowsGroupOpacity(组不透明,开启CALayer的allowsGroupOpacity属性后,子 layer 在视觉上的透明度的上限是其父 layer 的opacity(对应UIView的alpha),并且从 iOS 7 以后默认全局开启了这个功能,这样做是为了让子视图与其容器视图保持同样的透明度。) ->关闭 allowsGroupOpacity 属性,按产品需求自己控制layer透明度

4.shadows(阴影)-> 设置阴影后,设置CALayer的 shadowPath.view.layer.shadowPath=[UIBezierPath pathWithCGRect:view.bounds].CGPath;

5、shouldRasterize (光栅化)

三、怎么使用离屏渲染优化性能

shouldRasterize = YES在其他属性触发离屏渲染的同时,会将光栅化后的内容缓存起来,如果对应的layer及其sublayers没有发生改变,在下一帧的时候可以直接复用。【可以开启“Color Hits Green and Misses Red”来检查该场景下光栅化操作是否是一个好的选择,绿色则表示光栅化图层被复用,红色则无】

shouldRasterize (光栅化使用建议):

1.如果layer不需要复用,则没有必要打开

2.如果layer不是静态的,需要被频繁修改,比如出于动画之中,则开启光栅华反而影响性能

3.离屏渲染缓存有时间限制,当超过100ms,内容没有被使用就会被丢弃,无法复用

4.离屏渲染缓存有空间限制,超过屏幕像素的2.5倍则失效,并无法使用

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