史上最接地气的“离屏渲染”解释

各位看官在面试的时候 是不是经常被面试官问到 什么是离屏渲染? 哪些属性会引起离屏渲染?为什么会导致离屏渲染?  

相信大家都会说出导致离屏的属性,可另外两个问题却回答不好,如果你遇到过这种情况  相信你看完这篇文章 再也不会茫然了。

我们对这四个字做一下拆分:

离屏渲染  

离: 离开 ,谁离开, 从哪里离开,  又去哪里 

屏:屏幕,  什么屏幕?是我们的手机屏幕吗?

渲染: 渲染什么? 在哪里渲染?  如何渲染?

当你打开一个app  进入某个页面  你就简单理解为 你看到了一张图片  没错 这个页面就是一张图片 ,这张图片怎么来的?

悄悄地告诉你 在你的手机里面 有一位非常厉害的高级画师(GPU) 这位画师有多厉害呢?  他可以每秒绘制60张以上 美轮美奂的 精美图片  不服来挑战!!!

 巧妇难为无米之炊 这位画师再厉害  也不能在空气中画图,,因此他要有一张画布(frame buffer) 在这张画布上画画,,

这张画布 你就可以理解为  离屏渲染的 ”屏“

这位画师(GPU) 离开了这张画布 去另一张画布上画画 就是离屏渲染, 不明白? 继续向下看 

它为什么要离开?  还不是因为你刁难他,😄

我们想象一下现实中绘画的实际场景  一张大白纸  先画轮廓 在涂色 涂完一层 又一层  涂了一层 再来一层  ,,层层叠加 一张图片出来了,,

ok  回到我们的专业话题 一个页面 是有N个view 层层叠加 组合出来的,对吧?

假如一个页面 有四个view , frame都是 (0 0 320 640) 层级关系是 view1里面嵌套view2,view2里面嵌套view3, view3里面嵌套view4

GPU 在绘制这个页面的时候 就是 一层一层的绘制 先绘制view1 接着 view2, view3, view4  依次绘制 这个绘制就给现实中画画一样,绘制到画布(屏幕)上 就再也无法撤回,,

那么接下来 我提个特殊的需求  view3 有圆角 并且设置了 clipstobounds属性,这种情况GPU会怎么绘制这个页面呢??

 所谓圆角就是剪裁 也就是 view3 画好以后需要剪裁  而且必须把view4 也剪裁了 因此要等view4绘制完成后在剪裁, 但是不能剪裁 view1 和view2

可是 剪裁是整个画布一起剪裁 不知道亲爱的读者你能否理解 这一句

因此如果在当前画布上进行剪裁  必然把 view1 和view2 也剪裁了 因为这两个view是先画上去,, 那如何确保view4绘制完成之后的剪裁 不会影响到view1 和view2呢??

唯一的办法就是在创建一个画布 只在上面绘制view3 和view4  ,画好了 一起剪裁  ,,把剪裁好的画布 贴到 主画布上去,这样就不会影响到 view1 和view2了(两个画布需要内容交换:从主画布带着材料去另一个画布画画 画完了带着成果回到主画布 来来回回的交换确实够麻烦的)

这就是为什么 这位画师要离开当前画布 去别的画布 画画的原因,, 因为你的特殊需求(圆角)导致他不能在一张画布上完成所有的工作 ,,

所以它(GPU)离开了当前画布 去另一个画布  画画去了  == 离屏渲染  明白了嘛??

总结: 一些view的特殊属性导致GPU无法在一个画布上完成所有绘制 ,而开辟另一个画布去绘制  这就是离屏渲染

离屏渲染的缺点

两张画布 必然 内存增加

两张画布合成 必然增加了GPU工作量  因而导致这位画师单位时间内 绘制的图片减少  无法保证1秒60张图片的工作量了 ,,结果 页面卡了,,,

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

推荐阅读更多精彩内容

  • 1.循环滚动 每次滚动后都将scrollview的offset设置为中间的一页 若本次滚动是向前一页滚动,则把三页...
    yymyb阅读 509评论 0 0
  • [更新日志][1] [1]: https://blog.growingio.com/posts/iOS_chan...
    bmm_yj阅读 696评论 0 0
  • 离屏渲染 http://www.jianshu.com/p/6d24a4c29e18 离屏渲染不能被修改,它是CU...
    养頭渔阅读 152评论 0 0
  • 越害怕的东西越要去学习,对于程序员来说害怕莫过于美术,所以开始学点3d建模。 开源免费的Blender近年来大热,...
    好孩子橙米文阅读 536评论 0 0
  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 2,985评论 1 3