AsyncDisplayKit分析

AsyncDisplayKit是由Facebook开源的一款强大的异步渲染和布局引擎,可显著提升页面的流畅性。iOS SDK中UI绘制必须在主线程完成。这有助于简化代码和避免许多与多线程并发相关的问题,同时也减轻了开发者的负担。但是过多的耗时任务在主线程执行可能会导致页面卡顿。主线程的耗时工作主要是:视图对象的创建销毁、布局计算、图片的加载解码、文本的绘制等等。
而ASDK设计的思路是:尽可能将耗时的任务放入异步线程,减小主线程的压力,防止主线程阻塞引起页面的卡顿。

架构

image-asset.png
  • Node
    ASDK添加了ASDisplayNode, Node映射View(_ASDisplayView)和Layer(_ASDisplayLayer)。Node封装了几乎所有的UIView和Layer的属性,通过修改Node的属性就可以修改其所对应View或者Layer的属性。不同于UIView,Node是线程安全的,支持在异步线程对Node进行创建和修改。

  • _ASDisplayLayer
    _ASDisplayLayer继承自CALayer,其重写了display方法,默认会在异步线程进行绘制,并在主线程中将绘制后的image赋值给layer的content。

ASDK会将异步绘制的任务加入asyncdisplaykit_async_transaction中,同时其内部监听了Runloop的kCFRunLoopBeforeWaitingkCFRunLoopExit这两个activity,在Runloop即将进入等待状态或者即将退出时,会切换到主线程将已经绘制好的内容提交至layer.content。

- (void)display 
{
  ASDisplayNodeAssertMainThread();
  [self _hackResetNeedsDisplay];

  if (self.displaySuspended) {
    return;
  }

  [self display:self.displaysAsynchronously];
}

- (void)display:(BOOL)asynchronously
{
  if (CGRectIsEmpty(self.bounds)) {
    _attemptedDisplayWhileZeroSized = YES;
  }
  
  [self.asyncDelegate displayAsyncLayer:self asynchronously:asynchronously];
}

我们可以通过node.displaysAsynchronously = NO来关闭异步绘制的功能。
对于不支持用户操作的视图,我们可以通过node.layerBacked= YES,ASDK就不会渲染对应的UIView,相当于我们直接添加的CALayer,以此提高性能。

  • Node添加和移除
    ASDisplayNode和UIView类似,我们可以通过addSubnode添加子Node,removeFromSupernode来移除Node。同时可以通过initWithViewBlock将UIView封装进Node中(此时Node所对应的View将不再是_ASDisplayView),反过来也可以通过node.view将Node所对应的view添加进UIKit的视图层级当中。
ASDisplayNode *superNode = [ASDisplayNode new];

ASImageNode *imgNode = [ASImageNode new];
imgNode.image = [UIImage imageNamed:@"icon"];
[superNode addSubnode:imgNode];

ASDisplayNode *subNode = [[ASDisplayNode alloc] initWithViewBlock:^UIView * _Nonnull{
    UIView *v = [UIView new];
    v.backgroundColor = [UIColor greenColor];
    return v;
}];
[superNode addSubnode:subNode];

[self.view addSubview:superNode.view];

常用的Node

  • ASDisplayNode
    代替UIVIew,默认开启异步绘制,除非使用了initWithViewBlock:来创建Node。

  • ASTextNode
    代替UILabel, 仅支持attributed string,不能直接用NSString。默认在后台线程异步绘制文本。

  • ASImageNode
    代替UIImageView使用,主要改进的是支持在后台线程加载并解码图片,同时能在后台线程根据contentMode、image的scale、capInsets等属性对图片进行预处理,这部分工作UIImageView是在主线程中进行;支持的格式更多,比如gif格式;以及使用imageModificationBlock方便预处理图片(block也是在异步线程中执行)。

UIImage的初始化方法中,imageNamed:是加载图片进内存并立即解码,而其他的初始化方法(例如imageWithContentsOfFile:)则采用的是延迟解码(Lazy Decode), 仅仅将图片加载进内存,当图片渲染时才进行解码。
在Apple官方文档中imageNamed:方法在iOS9.0之后都是线程安全的,但笔者实际使用过程中发现其在异步线程偶现闪退和图片加载失败的状况。

ASImageNode *imageNode = [ASImageNode new];
imageNode.image = [UIImage imageNamed:@"icon"]; 
[self.view addSubview:imageNode.view];
// if exist supernode -> [superNode addSubnode:imageNode];

为了测试ASImageNode的性能,笔者写了个小Demo,见文末“图片加载时间分析Demo:TimeCompare”。采用3种方法加载7张大图(累计约7M),3种方法分别为:
① 采用ASImageNode加载
② 采用UIImageView加载
③ 异步线程加载UIImage,再callback回主线程由UIImageView加载
结果是在代码执行时间上3种方法相差无几,均在40ms~50ms之间。但是从 Instrument->Animation Hitches 去分析可以发现,用ASImageNode的主线程占用时间在80ms左右,而另外两种方法均在130ms以上。
在这个Demo中,ASImageNode是在主线程加载图片,实际开发中ASImageNode是可以在异步线程中加载图片的,时间开销能够更小。 因此用ASImageNode替代UIimageView使用,确实是个不错的选择。

  • ASButtonNode
    代替UIButton,更方便调整图片和标题的布局,例如图片标题上下布局、从右往左布局、调整间距等。

  • ASScrollNode
    代替UIScrollView

  • ASTableNode
    代替UITableView,其所映射的view是ASTableView,ASTableView继承自UITableView。在Node内部拦截了tableView的delegate和dataSource,外部需实现ASTableDegate和ASTableDataSource。
    ASTableNode无需实现类似heightForRowAtIndexPath的delegate方法,对于cell的高度计算放在ASCellNode当中。
    需要注意的是,cellNode并没有复用机制。当ASTableNode调用reloadData时,ASDK会根据当前显示区域创建相应的cellNode(部分在屏幕之外的node也会被预加载)。同时在ASTableNode内部拦截了系统tableView:cellForRowAtIndexPath:(这里仍然使用了cell复用机制), 并根据indexPath取到相应的cellNode,将其添加到cell的contentView中。

  • ASCellNode
    代替UITableViewCell,需要自己计算高度。我们需要在- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize中返回cell的宽高,需要注意的是这个方法在后台线程执行,使用时需要考虑到线程安全。如果cellNode不是使用ASLayoutSpec,则需要在layout中设置subnode的布局,layout是在主线程中执行。

- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize {
    /// 计算高度
    ///  height = value
    return CGSizeMake(constrainedSize.width, height);
}

- (void)layout {
    [super layout];
    CGFloat leftRight = 20;
    CGFloat width = self.calculatedSize.width - leftRight*2;
    CGSize textSize = [_textNode.attributedText getSizeInWidth:MAXFLOAT];
    _textNode.frame = CGRectMake(leftRight, (self.calculatedSize.height-textSize.height)/2, width, textSize.height);
}

布局

在iOS12之前,Auto Layout有性能问题,尤其是使用了嵌套Auto Layout。因此ASDK弃用了Auto Layout,自己设计了一套布局方式ASLayoutSpec。但由于我们原有的项目代码大量使用了Mansonry,而且Apple在iOS12之后优化了Auto Layout代码,使其在复杂布局下仍能与frame保持相似的性能,再加上目前商店版的最低支持系统已提升至11.0。因此目前仍然使用Masonry去写布局代码。
从 Auto Layout 的布局算法谈性能
iOS12 Auto Layout 的春天

需要注意的是,使用Auto Layout必须是在主线程,因此当用Masonry就等于放弃了在异步线程中添加node以及view懒创建的特性,仅仅保留了异步线程绘制的功能。
类似如下代码

    _contentNode = [ASDisplayNode new];
    [self addSubview:_contentNode.view];
    [_contentNode.view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(124);
        make.leading.width.equalTo(_contentNode.view.superview);
        make.height.mas_equalTo(145);
        make.bottom.mas_equalTo(-68);
    }];

将AsyncDisplayKit作为静态库引入

  1. AsyncDisplayKit原本为动态库,AsyncDisplayKit — Build Settings — Mach-O Type修改成Static Library,将其改成静态库。
  2. 编译生成Release不同架构下的framework(i386、x86-64、armv7、arm64),并通过 lipo -create将不多个AsyncDisplayKit.framework/AsyncDisplayKit合成一个,并替换原有的AsyncDisplayKit文件,生成fat framework。
  3. 主工程引入AsyncDisplayKit.framework,并引用WebKit、CoreMedia、CoreLocation、QuartzCore、AVFoundation、CoreGraphics、CoreText、UIKit、MapKit、Photos、AssetsLibrary、Foundation、UIKit等。
  4. 主工程Build Settings — Other Linker Flags添加 -ObjC、-force_load AsyncDisplayKit.framework。
    为何需要使用-ObjC,-all_load或者-force_load

目前已将AsyncDisplayKit移到自有仓库,通过Carthage依赖。

待优化

  • ASLabelNode使用Mansonry不能自适应宽高
    待优化
  • ASCellNode中ASImageNode或者ASTextNode偶现闪烁
    在ASCellNode中添加了ASImageNode或者ASTextNode的subnode时,tableNode reloadData的时候有概率闪烁。这是因为cellNode没有复用机制,reloadData时新的cellNode会将旧的cellNode替换掉,此时新的cellNode中的imageNode还并未加载过图片,是空白的。再加上imageNode是异步绘制,因此偶尔会闪烁。
    解决方法是将cellNode中的imageNode和textNode的displaysAsynchronously设置成NO。
    或者在ASCellNode中若需要显示文本或者图片的话,用以下代码代替:
// 替代ASImageNode
[[ASDisplayNode alloc] initWithViewBlock:^UIView * _Nonnull{
    UIImageView *view =  [UIImageView new];
    /// other init
    return view;
}];

// 替代ASTextNode
[[ASDisplayNode alloc] initWithViewBlock:^UIView * _Nonnull{
    UILabel *lbl [UILabel new];
    /// other init
    return lbl;
}];

附录

官方文档: AsyncDisplayKit is now Texture!
图片加载时间分析Demo:TimeCompare

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

推荐阅读更多精彩内容