解决常见的masksToBounds离屏渲染带来的性能损耗

-------》(转发)


这篇文章介绍ZYCornerRadius解决生产中圆角带来的离屏渲染问题的思路。

日常生产中app布局离不开美丽的圆角(RounderCorner),特别是用圆角UIImageView来做数据呈现交互,但是这种柔和易于让人接受的视图效果并不仅仅是改变了一个形状那么简单,需要付出一定的性能代价。

相信这已经是总所周知的问题了,日常我们使用layer的两个属性,简单的两行代码就能实现圆角的呈现

1

2imageView.layer.cornerRadius = CGFloat(10);

imageView.layer.masksToBounds = YES;

由于这样处理的渲染机制是GPU在当前屏幕缓冲区外新开辟一个渲染缓冲区进行工作,也就是离屏渲染,这会给我们带来额外的性能损耗,如果这样的圆角操作达到一定数量,会触发缓冲区的频繁合并和上下文的的频繁切换,性能的代价会宏观地表现在用户体验上----掉帧。这也是我亲身体验过的,有一次朋友在玩我手机的时候问我为什么会卡,看了后才发现原来是一个充满圆形头像的TableView。

屏幕的渲染机制这里就不copy了,很多朋友的文章也讨论过这样的问题。这篇文章有深入介绍屏幕显示机制。这里顺便贴一下我笔记里记录的会引发离屏渲染的操作,给大家做个记忆捆绑,正确与否大家可以自己思量。

The following will trigger offscreen rendering:

Any layer with a mask (layer.mask)

Any layer with layer.masksToBounds / view.clipsToBounds being true

Any layer with layer.allowsGroupOpacity set to YES and layer.opacity is less than 1.0

Any layer with a drop shadow (layer.shadow*).

Any layer with layer.shouldRasterize being true

Any layer with layer.cornerRadius, layer.edgeAntialiasingMask, layer.allowsEdgeAntialiasing

Text (any kind, including UILabel, CATextLayer, Core Text, etc).

Most of the drawing you do with CGContext in drawRect:. Even an empty implementation will be rendered offscreen.

因为这些效果均被认为不能直接呈现于屏幕,而需要在别的地方做额外的处理预合成。具体的检测我们可以使用Instruments的CoreAnimation。

ZYCornerRadius

以下介绍ZYCornerRadius(以Category的方式工作)对UIImageView设置圆角会触发离屏渲染的解决思路,有什么问题和建议还请大家发issues指导更正。

先上一张性能对比图

测试设备6P,屏幕中有40张尺寸为20*20的小图片,使用masksToBounds切角处理时帧率大大下降至20+,使用ZYCornerRadius时帧率保持在57+,性能接近0损耗。

既然我们要避免让GPU触发离屏,那么只能把兵符交给CPU,虽然CPU对图形的处理能力不及GPU,但由于这种处理的难度不大,且代价肯定远小于上下文切换。

其实一开始的想法就是从-drawRect下手,但是看了某篇文章(找不回来了)后打消了这个念头,-drawRect的确存在很多性能坑。

既然不能让控件masksToBounds,ZYCornerRadius就从图片本身下手,我使用在UIKit中对Core

Graphics有一定封装的应用层类UIBezierPath,对图片进行破坏性的切角,破坏性仅仅是对切去部分而言,当然这操作是在CPU内完成的,而后我只需要取到处理完成的bitmap(可为UIImage对象)交给GPU显示于屏幕即可。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17/**

* @brief clip the cornerRadius with image, UIImageView must be setFrame before, no off-screen-rendered

*/

- (void)zy_cornerRadiusWithImage:(UIImage *)image cornerRadius:(CGFloat)cornerRadius rectCornerType:(UIRectCorner)rectCornerType {

CGSize size = self.bounds.size;

CGFloat scale = [UIScreen mainScreen].scale;

CGSize cornerRadii = CGSizeMake(cornerRadius, cornerRadius);

UIGraphicsBeginImageContextWithOptions(size, NO, scale);

if(nil == UIGraphicsGetCurrentContext()) {

return;

}

UIBezierPath *cornerPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:rectCornerType cornerRadii:cornerRadii];

[cornerPath addClip];

[image drawInRect:self.bounds];

self.image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

}

可见,我对图片进行了切角处理后,将得到的含圆角UIImage通过-setImage传给了UIImageView。操作没有触发GPU离屏渲染,过程在CPU内完成,而后我在Demo中证实了这个方法。

顺便一提这里还存在一个性能问题,Color

Blended Layers,UIGraphicsBeginImageContextWithOptions(<#cgsize>,

<#bool>, <#cgfloat>)的第二个参数是透明通道的开关,true则为不透明。以下两张图是参数传NO or

YES在模拟器中打开了Color Blended Layers Debug所看见的区别:

一些没有被设置为opacity的图层,因为透明通道的存在,系统需要去计算图层堆叠后像素点的真实颜色,在Instruments的测试中也是可以高亮标显出来,这种性能的损耗程度我还没有专门去测试。但是在上图可以看见如果设置为不包含透明通道,我们图片被剪去的部分就没有了颜色(黑漆漆一片),这里使用的解决方案就是在图片上下文中先画一层backgroundColor,缺点就是需要传入:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20/**

* @brief clip the cornerRadius with image, draw the backgroundColor you want, UIImageView must be setFrame before, no off-screen-rendered

*/

- (void)zy_cornerRadiusWithImage:(UIImage *)image cornerRadius:(CGFloat)cornerRadius rectCornerType:(UIRectCorner)rectCornerType backgroundColor:(UIColor *)backgroundColor {

CGSize size = self.bounds.size;

CGFloat scale = [UIScreen mainScreen].scale;

CGSize cornerRadii = CGSizeMake(cornerRadius, cornerRadius);

UIGraphicsBeginImageContextWithOptions(size, YES, scale);

if(nil == UIGraphicsGetCurrentContext()) {

return;

}

UIBezierPath *cornerPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:rectCornerType cornerRadii:cornerRadii];

UIBezierPath *backgroundRect = [UIBezierPath bezierPathWithRect:self.bounds];

[backgroundColor setFill];

[backgroundRect fill];

[cornerPath addClip];

[image drawInRect:self.bounds];

self.image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

}

传入红色的背景颜色,打开Color Blended Layers Debug与原先对比:

目前我们解决了离屏渲染的问题,可这并不符合实际生产,在app中显示的网络图片我们不可能事先知道并且调用-

(void)zy_cornerRadiusWithImage:cornerRadius:rectCornerType:来进行切角,也不可能每次都还要写个SDWedImage的complete回调去做这个操作,我决定用swizzleMethod的办法来处理,关于对swizzleMethod的认识,可以看看我这篇文章。

我们把对self.image切角处理放在每次layoutSubviews的时候完成,大家看到这里顿时把我臭骂了一顿。。。在Category里重写-layoutSubviews的致命的,这的确会导致整个项目下所有的UIImageView都会去执行这个山寨的-layoutSubviews,别慌关掉文章,给个机会继续看下去。

首先我们需要将使用者传入的切角参数保存起来,供-layoutSubviews切角时使用,因为category不支持扩展属性,所以我们可以用runtime来做:

1

2

3

4

5

6

7

8

9/**

* @brief set cornerRadius for UIImageView, no off-screen-rendered

*/

- (void)zy_cornerRadiusAdvance:(CGFloat)cornerRadius rectCornerType:(UIRectCorner)rectCornerType {

objc_setAssociatedObject(self, &kRadius, @(cornerRadius), OBJC_ASSOCIATION_RETAIN_NONATOMIC);

objc_setAssociatedObject(self, &kRoundingCorners, @(rectCornerType), OBJC_ASSOCIATION_RETAIN_NONATOMIC);

objc_setAssociatedObject(self, &kIsRounding, @(0), OBJC_ASSOCIATION_RETAIN_NONATOMIC);

[self.class swizzleMethod:@selector(layoutSubviews) anotherMethod:@selector(zy_LayoutSubviews)];

}

细心的朋友可以看见上面这段代码里的+swizzleMethod,我将调用了-

(void)zy_cornerRadiusAdvance:cornerRadius:rectCornerType:的UIImageView对象的-layoutSubviews方法的实现转移到了我自己的方法-zy_LayoutSubviews上,也就是说我不需要去重写-layoutSubviews,而主动调用过-zy_cornerRadiusAdvance的UIImageView对象的-layoutSubviews的实现却被我换成了-zy_LayoutSubviews,源代码在Demo中有。ok,于是在-zy_LayoutSubviews中收官:

1

2

3

4

5

6- (void)zy_LayoutSubviews {

[superlayoutSubviews];

NSNumber *radius = objc_getAssociatedObject(self, &kRadius);

NSNumber *roundingCorners = objc_getAssociatedObject(self, &kRoundingCorners);

[self zy_cornerRadiusWithImage:self.image cornerRadius:radius.floatValue rectCornerType:roundingCorners.unsignedLongValue];

}

这样不需要离屏渲染的UIImageView圆角工具ZYCornerRadius就完成了,有问题或建议欢迎发issues交流,还希望大家star以支持啊,谢谢!

Usage:ZYCornerRadius提供两种使用方式

Category方式:

导入头文件

1

#import "UIImageView+CornerRadius.h"

创建圆角半径为6的UIImageView(三种方式):

1

2

3

4

5

6

7

8

9

10

11

12//1

UIImageView *imageView = [UIImageView zy_cornerRadiusAdvance:6.0f rectCornerType:UIRectCornerAllCorners];

imageView.image = [UIImage imageNamed:@"mac_dog"];

//2

UIImageView *imageView = [[UIImageView alloc] initWithCornerRadiusAdvance:6.0f rectCornerType:UIRectCornerAllCorners];

imageView.image = [UIImage imageNamed:@"mac_dog"];

//3

UIImageView *imageView = [[UIImageView alloc] init];

[imageView zy_cornerRadiusAdvance:6.0f rectCornerType:UIRectCornerAllCorners];

imageView.image = [UIImage imageNamed:@"mac_dog"];

创建圆形的UIImageView(三种方式):

1

2

3

4

5

6

7

8

9

10

11

12//1

UIImageView *imageView = [UIImageView zy_roundingRectImageView];

imageView.image = [UIImage imageNamed:@"mac_dog"];

//2

UIImageView *imageView = [[UIImageView alloc] initWithRoundingRectImageView];

imageView.image = [UIImage imageNamed:@"mac_dog"];

//3

UIImageView *imageView = [[UIImageView alloc] init];

[imageView zy_cornerRadiusRoundingRect];

imageView.image = [UIImage imageNamed:@"mac_dog"];

子类ZYImageView方式同理:

导入头文件

1

#import "ZYImageView.h"

使用方式同理

以下列出ZYCornerRadius所开放的主要的func:

配置一个圆角UIImageView,传入圆角半径和圆角类型

1

2+ (UIImageView *)zy_cornerRadiusAdvance:(CGFloat)cornerRadius rectCornerType:(UIRectCorner)rectCornerType;

- (instancetype)initWithCornerRadiusAdvance:(CGFloat)cornerRadius rectCornerType:(UIRectCorner)rectCornerType;

配置一个圆形的UIImageView

1

2+ (UIImageView *)zy_roundingRectImageView;

- (instancetype)initWithRoundingRectImageView;

直接为UIImageView设置圆角图片,传入UIImage,圆角半径和圆角类型,当次有效!

1

- (void)zy_cornerRadiusWithImage:(UIImage *)image cornerRadius:(CGFloat)cornerRadius rectCornerType:(UIRectCorner)rectCornerType;

以下记录失败过程...

尝试在-drawRect中做切角操作

1.内存使用过大,造成更多的性能损耗

尝试从init出发

1.需要事先传入Image,而且当Image改变后无效,不适合实际生产

尝试从-layoutSubviews下手

1.在Category中重写该方法会造成不可挽回的结果

在setImage中设置好标识符开关,在layoutSubviews中判断开关状态再执行操作

1.虽然解决了对其他UIImageView的影响,可实现方式过于投机取巧过于费力。

尝试直接从重写-setImage下手

1.直接重写会导致无限递归

2.自己重写为UIImageView显示图片的机制,不熟悉源码实现,担心造成什么遗漏。

最坏的打算,大胆使用swizzleMethod。

Relation:@liuzhiyi1992on Github

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

推荐阅读更多精彩内容

  • github链接: https://github.com/liuzhiyi1992/ZYCornerRadius本...
    zhiyi阅读 3,582评论 13 38
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,311评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 4,982评论 5 13
  • 实际开发中,大多会遇到圆角或者圆形的控件的情况。通常,简便的解决方案主要是: 1.让美工做一个圆角的图片...
    LanWor阅读 1,590评论 1 5
  • 沉夜千百,思着旧事万般。 朦胧浮生,哪里一人心安? 梦断一世,却为情字伤感。 相思明月,何须告问广寒? 无心留恋,...
    Hello大壮阅读 117评论 0 0