instrument 之Core-Animation 性能调优(Color Blended Layers)

在性能优化中一个最具参考价值的属性是FPS:全称Frames Per Second,其实就是屏幕刷新率,苹果的iphone推荐的刷新率是60Hz,也就是说GPU每秒钟刷新屏幕60次,这每刷新一次就是一帧frame,FPS也就是每秒钟刷新多少帧画面。静止不变的页面FPS值是0,这个值是没有参考意义的,只有当页面在执行动画或者滑动的时候,FPS值才具有参考价值,FPS值的大小体现了页面的流畅程度高低,当低于45的时候卡顿会比较明显。

注意点:

(1)使用真机调试。

(2)最好使用release包测试(release是发布版本,苹果会在release包中做很多优化工作(比如看门狗,编译器优化,后续介绍),因此用release包测试出来的性能才是最真实的)。

启动程序点击XCode选择左上角-XCode->Open Developer Tool ->Instruments,打开Instruments再选择

Core  Animation

点击Core  Animation


Core Animation界面

1:Core Animation Dubug Options (官方文档)

Core Animation contains a number of useful debugging options in the display settings area of the inspector pane. You do not need to be running a trace to use these options on your iOS device.

1.1 :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.

1.2 :Color Hits Green and Misses Red

Marks views in green or red. A view that is able to use a cached rasterization is marked in green.

1.3 :Color Copied Images

Shows images that are copied by Core Animation in blue.

1.4 :Color Immediately

Removes the 10 ms delay when performing color-flush operations.

1.5 :Color Misaligned Images

Places a magenta overlay over images where the source pixels are not aligned to the destination pixels.

1.6 :Color Offscreen-Rendered Yellow

Places a yellow overlay over content that is rendered offscreen.

1.7 :Color OpenGL Fast Path Blue

Places a blue overlay over content that is detached from the compositor.

1.1 :Flash Updated Regions

Colors regions on your iOS device in yellow when those regions are updated by the graphics processor.

备注:看不习惯的小伙伴可以直接有道

1.1:什么是Blending?

在iOS的图形处理中,blending主要指的是混合像素颜色的计算。最直观的例子就是,我们把两个图层叠加在一起,如果第一个图层的透明的,则最终像素的颜色计算需要将第二个图层也考虑进来。这一过程即为Blending。

图:1-1-0
图:1-1-2  Blending view的层次关系

备注:Blending 你可以这么理解,如果用instrument调试,4区域不会显示红色,方便理解

图:1.1    1 表示白色的背景    2 红色的区域    3 蓝色的区域    4 混合区域

Blending  你也可以这么理解 当他们重合 Alpha = 1 视图的时候,你可以把他们想象成,各个视图各司其职,没有联系。

当某一个view 的 Alpha < 1,他与他父视图的交集部分。 需要额外的计算。

例如:

当图中蓝色部分(3)Alpha  = 0.5 的时候,3和2的交集视图需要混合计算(2和1的视图不做计算);

当图中红色部分(2)Alpha  = 0.5 的时候,需要通过2和白色的背景1视图来混合计算;

由此可见,如何有比较多的互相重叠的图片,在混合计算的这一块需要耗费比较多的性能。

混合时图的计算公式:

图:1-1-3

图1-1-3:在公式中A 代表下面图层的颜色值;B 代表上面图层的颜色值;C 代表混合图层的颜色值;d 表示该层的透明度。

会导致blending的原因:

UIImageView 的 image 含有透明通道;

UIView/Layer 的 Alpha < 1

为什么Blending会导致性能的损失?

原因是很直观的,如果一个图层是不透明的,则系统直接显示该图层的颜色即可。而如果图层是透明的,则会引入更多的计算,因为需要把下面的图层也包括进来,进行混合后颜色的计算。

UILabel在iOS8下的Color Blended Layers

在iOS8上用UILabel显示中文却出现了像素混合的情况,这是为什么呢?我们来看看UILabel在iOS8前后的变化,在iOS8以前,UILabel使用的是CALayer作为底图层,而在iOS8开始,UILabel的底图层变成了_UILabelLayer,绘制文本也有所改变(这个内容我还没有找到原因,如果有知道的老铁可以私信跟我说下了,我搞懂了,再写给大家)

图:1-1-4

图:1-1-4  Demo代码

图:1-1-5

图:1-1-5  Demo模拟器效果图


图:1-1-6

图:1-1-6 instrument  -> Core-Animation ->options->Color Blended Layers 效果图

图:1-1-6红色的区域是由图层混合导致的了,怎么解决呢?

首先我们来观察一下上图,从图中我们可以看到在背景色的四周多了一圈透明的边,而这一圈透明的边明显超出了图层的矩形区域,既然发现这了一点,那么解决方案就很明了。

maskLabel.layer.masksToBounds = YES;

备注:Core-Animation 的模块写完,我会把所有的demo代码上传到github提供大家测试

有大神愿意指导下的,随时欢迎👏(写的不够仔细的,可以私信我).


下一篇:Color Hits Green and Misses Red


参考文档:

http://www.jianshu.com/p/bdd39a56142a

http://www.cocoachina.com/ios/20150429/11712.htmlWWDC心得与延伸:iOS图形性能

http://nshipster.cn/cggeometry/CGRectIntegralCGRectIntegral: 返回包围源矩形的最小整数矩形。

http://blog.csdn.net/jiang314/article/details/51840577iOS app性能优化的那些事(二)

http://ihomway.cc/2017/07/28/ios-grapics-performance/.如何改善图形性能

https://developer.apple.com/videos/play/wwdc2011/121/Understanding UIKit Rendering

https://developer.apple.com/videos/play/wwdc2014/419/Advanced Graphics and Animations for iOS Apps

https://developer.apple.com/videos/play/wwdc2012/238/iOS App Performance: Graphics and Animations

https://robots.thoughtbot.com/designing-for-ios-graphics-performanceGraphics & Performance

https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/iOS 保持界面流畅的技巧

https://objccn.io/issue-3-1/绘制像素到屏幕上

https://www.objc.io/issues/3-views/moving-pixels-onto-the-screen/Getting Pixels onto the Screen

http://www.spotlessicode.com/blog/categories/ios

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

推荐阅读更多精彩内容