浅谈iOS中的视图优化

引言:
让我们来思考几个问题,你开发过的产品,它还有可以优化的地方吗?能增加它的帧率吗?能减少多余的CPU计算吗?是不是存在多余的GPU渲染?业务这点工作量对于越来越强大的设备面前显得微不足道,但作为一个细心的开发者,我觉得很有必要来谈谈iOS中的视图优化。

本文从开发者最容易犯错的地方出发,结合例子,从以下几个角度阐述如何进行视图优化:

  • Color Blended Layers
  • Color Copied Images
  • Color Misaligned Images
  • Color Offscreen-Rendered

这个4个选项,可以从模拟器的Debug选项中看到

模拟器选项

别急,我们一个个来看,首先是Color Blended Layers

Color Blended Layers

官方是这么描述它的:

Shows blended view layers. Multiple view layers that are drawn on top of each other with blending enabled are highlighted in red. Reducing the amount of red in your app when this option is selected can dramatically improve your app’s performance. Blended view layers often cause slow table scrolling.

简单来说,屏幕上的每个像素点的颜色是由当前像素点上的多层layer(如果存在)共同决定的,GPU会进行计算出混合颜色的RGB值,最终显示在屏幕上。而这需要让GPU计算,所以我们要尽量避免设置alpha,这样GPU会忽略下面所有的layer,节约计算量。

下面让我们来看一下设置alpha的效果,上面的灰色小块是透明的。


demo
检测后

效果很明显,设置了透明的view会让GPU计算图层混合后的最终结果。

我想再提一下opaque这个属性,网上普遍认为view.opaque = YES,GPU就不会进行图层混合计算了。而这个结论是错误的,其实view.opaque事实上并没什么卵用。
如果你真的想达到这个效果,可以用layer.opaque,这个才是正确的做法

Color Copied Images

"If an image is in a color format that the GPU can not directly work with, it will be converted in the CPU."

Session 419 WWDC 2014中详细介绍了这货,其实这个东西跟开发者并没什么关系,遇到这种情况,我们大可以摔锅给设计(当然你乱做优化导致图片颜色格式改变,那就没办法了)。

简而言之,苹果的GPU只解析32bit的颜色格式,记住是32bit
如果你放一张图片,而它的颜色格式却不是32bit,CPU会先进行颜色格式转换,再让GPU渲染。乖乖的CPU就默默做了这个多余的工作。

所以给你两个选择:

  • 让设计湿都给你切32bit的图
  • 自己去跑个异步线程来转换颜色去吧,不要去堵塞本来就压力很大的主线程!

你选哪个?当然是让设计湿切图啦,我才不愿意多写代码。
而且于情于理,就算异步转换颜色,也会导致性能损耗,比如电量增多,发热强变大等等等等

上demo:

demo

检测后

两个一样的图,仅仅是采用了不同颜色格式,上面是32bit,下面是8bit,于是乎,8bit的会导致Color Copied Images8,让CPU多运算了。

Color Misaligned Images

Misaligned Image表示要绘制的点无法直接映射到频幕上的像素点,此时系统需要对相邻的像素点做anti-aliasing反锯齿计算,增加了图形负担,通常这种问题出在对某些View的Frame重新计算和设置时产生的。

很简单,不要出现image sizeimageView size不同的情况,这样会触发反锯齿计算,增加性能损耗。

上demo:

demo

一下就好看出来,下面的图片尺寸不合适。

所以,实际开发中,本地的图片比较好把控,只需要写好对应的尺寸就好了,但是对于download下来的图片,可以在加载完后进行size处理,以满足imageView frame。特别是对于很多app,有大量的tableview,如果进行处理,则会大幅度提高流畅度。

Color Offscreen-Rendered

最后就是Offscreen-Rendered(离屏渲染)了。

这个东西讲起来感觉非常复杂,我觉得只需要知道,离屏渲染会导致CPU在后台保存一份bitmap,所以会导致CPU多余运算。

而避免的方式则是避免去做触发的动作:

  • 重写drawRect方法
  • masksToBounds
  • 其他一些手动触发离屏渲染的动作

最后看个demo:

万恶的圆角
发现罪恶

如图所示,触发了离屏渲染。

总结:

如果开发阶段都注意到这些细节,那么我觉得性能将不会是很大的问题了。

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

推荐阅读更多精彩内容

  • 本文参考黄建敏(@kuailejim)的浅谈iOS中的视图优化 引言: 让我们来思考几个问题,你开发过的产品,它还...
    路飞_Luck阅读 325评论 0 0
  • 有很多种framework以及很多种方法的组合可以在屏幕上渲染UI元素,我们在这里讨论这个过程中发生的事情,希望这...
    纵横而乐阅读 4,480评论 4 25
  • 绘制像素到屏幕上 answer-huang22 Mar 2014 分享文章 一个像素是如何绘制到屏幕上去的?有很多...
    阿狸旅途T恤阅读 1,619评论 0 7
  • 卷首语 欢迎来到 objc.io 的第三期! 这一期都是关于视图层的。当然视图层有很多方面,我们需要把它们缩小到几...
    评评分分阅读 1,755评论 0 18
  • 本文讲述在APP的开发过程中,需要从哪些方面对渲染性能进行优化。 1.尽量避免使用半透明 1.1原因 在使用半透明...
    buptwsg阅读 2,324评论 0 3