AsyncDisplayKit是由Facebook开源的一款强大的异步渲染和布局引擎,可显著提升页面的流畅性。iOS SDK中UI绘制必须在主线程完成。这有助于简化代码和避免许多与多线程并发相关的问题,同时也减轻了开发者的负担。但是过多的耗时任务在主线程执行可能会导致页面卡顿。主线程的耗时工作主要是:视图对象的创建销毁、布局计算、图片的加载解码、文本的绘制等等。
而ASDK设计的思路是:尽可能将耗时的任务放入异步线程,减小主线程的压力,防止主线程阻塞引起页面的卡顿。
架构
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的kCFRunLoopBeforeWaiting和kCFRunLoopExit这两个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
代替UIScrollViewASTableNode
代替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作为静态库引入
- AsyncDisplayKit原本为动态库,AsyncDisplayKit — Build Settings — Mach-O Type修改成Static Library,将其改成静态库。
- 编译生成Release不同架构下的framework(i386、x86-64、armv7、arm64),并通过 lipo -create将不多个AsyncDisplayKit.framework/AsyncDisplayKit合成一个,并替换原有的AsyncDisplayKit文件,生成fat framework。
- 主工程引入AsyncDisplayKit.framework,并引用WebKit、CoreMedia、CoreLocation、QuartzCore、AVFoundation、CoreGraphics、CoreText、UIKit、MapKit、Photos、AssetsLibrary、Foundation、UIKit等。
- 主工程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