iOS开源库源码解析之AsnycDispalyKit

来自Leo的原创博客，转载请著名出处

我的stackoverflow

---

前言

最近心血来潮，想研究下FaceBook的AsnycDispalyKit的源代码，学习一些界面优化的技术以及编码风格。这篇文章，会详细的记录下我认为对新手有用的部分。后面有空的时候，继续研究其他几个iOS开发很流行的库－AFNetworking,SDWebImage,MBProgressHud,Mantle等`。AsnycDisplayKit是一个非常庞大的库，所以我尽量捞干的讲。

关于AsyncDisplayKit

• 文档
• 源代码

如果只是想优化界面，那么可以用AsyncDisplayKit来重写哪些性能要求比较高的部分

对了，阅读YYKit的作者ibireme的《iOS 保持界面流畅的技巧》一文对我的启发很大，建议读者可以看看他的文章，真的写得很好,是国内少有的iOS开发大神。

---

界面顿卡的原因

iOS的屏幕是60fps，也就是说，每一帧的间隔是1/60s，大概16.7ms。
每一帧显示需要三步

• CPU计算好视图（UIView）的大小，位置，对图片进行解码，绘制好纹理交给GPU
• GPU根据纹理，顶点进行空间变换，渲染后放到帧缓冲区
• 每当帧信号到达的时候，从帧缓冲区取一帧，显示到屏幕上

也就是说，整个CPU＋GPU处理的时间是16.7ms，如果超过这个时间，那么当前绘制的一帧就没办法放到帧缓冲区，帧信号到达的时候，取的还是上一帧的数据。也就是造成了界面没有变化，显示顿卡。也就是说，为了解决顿卡，一般要从CPU和GPU两个角度来考虑

CPU限制

• 对象的创建，释放，属性调整。这里尤其要提一下属性调整，CALayer的属性调整的时候是会创建隐式动画的，是比较损耗性能的。
• 视图和文本的布局计算，AutoLayout的布局计算都是在主线程上的，所以占用CPU时间也很多 。
• 文本渲染，诸如UILabel和UITextview都是在主线程渲染的
• 图片的解码，这里要提到的是，UIImage只有在交给GPU之前的一瞬间，CPU才会对其解码。

GPU限制

• 视图的混合，比如一个界面十几层的视图叠加到一起，GPU不得不计算每个像素点药显示的像素
• 视图的Mask，比如圆角什么的，会触发离屏渲染，占用GPU时间。
• 半透明，GPU不得不进行数学计算，如果是不透明的，CPU只需要取上层的就可以了
• 浮点数像素

AsnycDisplayKit通过很多技巧来解决这些问题，后文我会一点点分析如何实现的。

---

AsyncDisplayKit是啥

这是Facebook推出的一个框架，用在Paper的App中。用来保证复杂的界面交互的时候，也不会掉帧。
通过名字就可以看出来，AsyncDisplay就是异步加载控件。了解UIKit的同学都知道，UIKit的中的UIView和CALayer的布局和渲染都是在主线程上进行的，当界面复杂的时候，也就会占用大量时间导致掉帧。这个框架是建立在UIKit之上的，对UIView进行了进一步的封装－Node。Node支持异步的绘制UIView。Asnyc有一个原则

• 能放到后台执行的代码就尽量放到后台，不能放到后台执行的代码就尽量优化（比如用Runloop对任务进行拆分）

---

ASDealloc2MainObject

这个类中，AsnycDisplayKit重新定义了Release和Reatin方法来让一个类支持自己引用计数，可以强制的让对象在主线程dealloc，不过这个文件是MRC的，也就是要在build setting中添加-fno-objc-arc。

那么，为什么要强制的在主线程dealloc呢？因为UIKit的对象不是线程安全的，只能在主线程上进行dealloc

Tips：

1.可以在文件中，添加如下代码

#if __has_feature(objc_arc)#error This file must be compiled without ARC. Use -fno-objc-arc.#endif

来让编译器检查本文件只能在MRC条件下编译。
关于如何重写Release和Reatian，可以在这个文件里找到_AS-objc-internal.h。

2.由于Define只是在编译期进行简单替换，可以通过#defeine的方式为类条件添加代码

---

大量的断言和宏定义

通过阅读源代码可以发现，代码中使用了大量的宏和断言

- (void)dealloc{  ASDisplayNodeAssertMainThread();  //Other codes}

其中ASDisplayNodeAssertMainThread()为宏定义，

  #define ASDisplayNodeAssertWithSignal(condition, description, ...) NSAssert(condition, description, ##__VA_ARGS__) #define ASDisplayNodeAssertMainThread() ASDisplayNodeAssertWithSignal([NSThread isMainThread], nil, @"This method must be called on the main thread")

对于断言和宏定义使用很少的同学，可以看看这个头文件，会对你很有帮助。

Tips：
合理的使用断言NSAssert，能够让你的代码在更早的地方出现问题，方便发现问题进行调试。在XCode 7中，NSAssert默认只会在Debug模式下起作用，在release模式下不会起作用，

---

Objective C++

在AsyncDisplay中，可以看到很多.mm后缀的文件，例如

Objective C++和Objective C类似，它的文件组成由一个.h和一个.mm组成，你可以使用C＋＋的语法，例如命名空间，由于编译过后会被链接到OC runtime，所以，也可以使用OC的类。

简单来说，利用Objective C＋＋，你可以使用C＋＋和OC来混合编程

---

clang

新手开发往往忽略了开发中很重要的一个环节-编译,iOS开发的编译器是－clang＋llvm。通过编译器，往往可以

• 修改编译器的警告模式，开启全部警告
• 忽略某一个编译器的警告
• 条件编译代码，和if else很像

所以，如果读到这里，还是对iOS的编译环节没有一个清楚的认识，建议看看clang和LLVM的wiki。另外，研究下XCode中build settings下所有的内容，还有，我之前的这篇博客也介绍了Clang的警告相关

举例看看这个库中是如何使用的

1.pragma once,让一个文件在一个单独的编译中只包含一次，类似ifndef…define…endif或者import

2.在看看处理警告

#pragma clang diagnostic push#pragma clang diagnostic ignored "-Wdeprecated-declarations"  if ([_asyncDelegate respondsToSelector:@selector(collectionView:didEndDisplayingNodeForItemAtIndexPath:)]) {    [_asyncDelegate collectionView:self didEndDisplayingNodeForItemAtIndexPath:indexPath];  }#pragma clang diagnostic pop

这简单提一下，编译的过程会有一个类似编译状态的堆栈，先压栈保存当前的状态，然后忽略-Wdeprecated-declarations这个警告，在编译完这段代码之后，再出栈恢复之前的状态

3.开启所有的警告 -Wall

---

ASDisplayNode

这里不得不提到了，UIView和CALayer的关系

• 所有视图可见的部分，本质上都是CALayer显示的
• CALayer不能接受触摸，UIView相当于是CALayer的代理，用来接受触摸，响应responser，以及发出各种通知。
• 在性能要求较高的地方，往往使用Layer，因为Layer更加轻量级

AsnycDisplayKit仿照这种代理关系，对UIView进行了进一步的封装－ASDisplayNode。其中，Node是可以异步绘制的，也可以是layerBased

ASDisplayNode的继承方式如下

可以看到，类似于UIView与UILabel的关系，ASDisplayNode是AsyncDisplayKit中可视部分node的基类。

---

异步渲染

displaysAsynchronously;

这个属性用来决定是否是异步绘制的，异步绘制的流程如下

• 当一个View被添加到View的层次结构中，needsDisplay 会返回true
• 在布局结束后，Core Animation会调用_ASDisplayLayer的display方法，在displayQueue队列上添加一个绘制任务s
• 当绘制实际执行的时候，会调用代理方法-drawRect:或者-display
• 一个绘制任务会被添加到asyncdisplaykit_async_transaction中，绘制都结束后，回调完成block

简单来讲将绘制封装成任务，提交到displayQueue(后台队列)执行

我们来看下，AsyncDisPlayKit异步渲染的一段代码_ASDisplayLayer.h

- (void)_hackResetNeedsDisplay{  ASDisplayNodeAssertMainThread(); //断言在主线程  // Don't listen to our subclasses crazy ideas about setContents by going through super  super.contents = super.contents; //设置当前的contents为super.conents}- (void)display{  [self _hackResetNeedsDisplay]; //先在主线程上设置当前的contents为super.contents  ASDisplayNodeAssertMainThread();//保证在主线程  if (self.isDisplaySuspended) {//检查display是否被挂起，如果被挂起则返回，不需要展示    return;  }  [self display:self.displaysAsynchronously];//根据displaysAsynchronously属性来判断是否需要异步展示}- (void)display:(BOOL)asynchronously//绘制任务交给代理－代理设计模式{  [self _performBlockWithAsyncDelegate:^(id<_ASDisplayLayerDelegate> asyncDelegate) {    [asyncDelegate displayAsyncLayer:self asynchronously:asynchronously];  }];}

然后我们再看看代理是如何异步绘制的,代码在这个文件ASDisplayNode+AsyncDisplay.mm,这个方法 - (void)displayAsyncLayer:(_ASDisplayLayer *)asyncLayer asynchronously:(BOOL)asynchronously
代码较长，我挑出核心部分来讲解，其中display的核心就是这个

//这个block用来进行实际的绘制 asyncdisplaykit_async_transaction_operation_block_t displayBlock = [self _displayBlockWithAsynchronous:asynchronously isCancelledBlock:isCancelledBlock rasterizing:NO];//省略中间代码[transaction addOperationWithBlock:displayBlock queue:[_ASDisplayLayer displayQueue] completion:completionBlock];

而addOperationWithBlock,就是把绘制任务，添加到后台GCD任务组里

- (void)addOperationWithBlock:(asyncdisplaykit_async_transaction_operation_block_t)block                        queue:(dispatch_queue_t)queue                   completion:(asyncdisplaykit_async_transaction_operation_completion_block_t)completion{  ASDisplayNodeAssertMainThread();  ASDisplayNodeAssert(_state == ASAsyncTransactionStateOpen, @"You can only add operations to open transactions");  [self _ensureTransactionData];  ASDisplayNodeAsyncTransactionOperation *operation = [[ASDisplayNodeAsyncTransactionOperation alloc] initWithOperationCompletionBlock:completion];  [_operations addObject:operation];  dispatch_group_async(_group, queue, ^{    @autoreleasepool {      if (_state != ASAsyncTransactionStateCanceled) {        operation.value = block();      }    }  });}

---

layerBacked

对于，那些不需要接受触摸，不需要响应UIView的各种通知的Node，可以把layerBacked设置为true。这样，AsyncDisplayKit会自动使用Layer作为Node的backed。上文也提到了Layer相对于UIView的各种优点，这里不再赘述

---

SubTree预合成

shouldRasterizeDescendants来决定,所谓预合成，就是几个Layer合并成一个Layer来处理

这个属性，用来决定是否需要将子Node都绘制到当前context中，也就是预合成.

预合成的优点

• 占用更少的内存，因为子Layer不需要单独被创建出来
• CPU不需要再为子Layer计算布局，大小
• GPU在渲染的时候，只需要绘制一层纹理，不需要进行混合

预合成的代码，可以参考ASDisplayNode+AsyncDisplay.mm中的_recursivelyRasterizeSelfAndSublayersWithIsCancelledBlock这个方法，当预合成开启的时候，会递归的检查subnode，绘制到当前ImageContext中。关闭的时候，每一个subnode维护自己的Context

---

预加载

所谓预加载，就是在视图尚未出现在屏幕上的时候，进行网络请求，布局计算，图片解码，后台视图渲染。然后，随着屏幕滚动，预先加载的内容就不需要再占用时间进行计算了，直接拿过来显示就可以了。

根据预加载的程度，AsyncDisplayKit把显示区域划分成几个类型

• Visible Range,在屏幕上的区域
• Display Range,被认为是将要展示的区域，这个区域会进行布局计算，图片解码，后台渲染等预加载
• Fetch Data Range，进行预先数据获取的区域（网络或者磁盘）

关于预加载，可以参考ASTableView的代码，
Range的定义

typedef NS_ENUM(NSInteger, ASLayoutRangeType) {  ASLayoutRangeTypeDisplay,  ASLayoutRangeTypeFetchData,  ASLayoutRangeTypeCount};

AsyncDispaly主要用三个类实现预加载

• ASDataController 用来在后台处理数据
• ASRangeController,用在ASTableview和ASCollectionView中，管理区域的变化。
• ASFlowLayoutController,用来获取当前屏幕上处在各个区域的cell的indexPath

这里面的代码逻辑和架构设计都十分复杂，感兴趣的同学可以研究下源代码。
这里，我列出来ASTableivew的初始化代码

  _layoutController = [[ASFlowLayoutController alloc] initWithScrollOption:ASFlowLayoutDirectionVertical];  _rangeController = [ASDisplayNode shouldUseNewRenderingRange] ? [[ASRangeControllerBeta alloc] init]                                                                : [[ASRangeControllerStable alloc] init];  _rangeController.layoutController = _layoutController;  _rangeController.dataSource = self;  _rangeController.delegate = self;  _dataController = [[dataControllerClass alloc] initWithAsyncDataFetching:NO];  _dataController.dataSource = self;  _dataController.delegate = _rangeController;  _layoutController.dataSource = _dataController

看起来是不是很有趣呢？

1. _rangeController持有_layoutController的一个引用
2. _layoutController的数据源是_dataController
3. _dataController的代理又是_rangeController

其中，_layoutController的核心是这个方法 - 根据rangeType来获取对应的indexSet

- (NSSet *)indexPathsForScrolling:(ASScrollDirection)scrollDirection rangeType:(ASLayoutRangeType)rangeType

_dataController的数据源是self(ASTableview),也就是它依赖ASTableivew为自己提供数据，然后Delegate是_rangeController，也就是说，可以这么理解_dataController作为一个桥梁，由ASTableview提供数据，并且提供接口给ASTableview调用，回调给_rangeController。

通过阅读ASDataController的接口可以看到，这个类主要就是用来处理数据的,处理ASTable的插入删除reload等，比如

- (void)insertRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withAnimationOptions:(ASDataControllerAnimationOptions)animationOptions;- (void)deleteRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withAnimationOptions:(ASDataControllerAnimationOptions)animationOptions;- (void)reloadRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withAnimationOptions:(ASDataControllerAnimationOptions)animationOptions;

_rangeController的dataSrouce和delegate都是self，也就是它是直接和ASTableview打交道的，而代理和数据源如下图,通过名字就可以看出来，rangeController用来实际的管理区域的变化。并且回调给ASTableview

这么设计的最大的优点是什么？ － 解耦,让不同的类分别处理某一块逻辑，这样代码的逻辑清楚，方便测试，方便后期维护

---

布局计算

通常开发iOS的时候，布局有两种

1. AutoLayout
2. 手动计算位置大小(layoutSubViews,或者viewDidLayoutSubviews里调整位置)

AutoLayout有一个明显的缺点：Layout计算在主线程，并且随着视图量级的增加，AutoLayout占用的时间成指数级别上升。手动调整布局虽然性能上好一些，但是缺需要大量的计算。

AsyncDisplay定义了自己的布局引擎，采用了CSS Box模型。CSS的box模型布局更加灵活。

那么，AsyncDisplayKit如何实现了Box的模型呢？

主要由协议ASLayoutAble来定义一个node是可以Layout，

@protocol ASLayoutable <ASStackLayoutable, ASStaticLayoutable, ASLayoutablePrivate>//包括相对于前一个node的距离，后一个的距离，自己的position等信息，用来计算位置@end

---

Runtime的使用

这个术语老生常谈的了，Runtime在很多开源库，包括很多项目开发的时候都会用到，并不是什么黑科技。只是利用好OC的语言特性罢了。比如ASInternalHelpers.mm里利用Runtime去检查子类是否重写了一个Selector

BOOL ASSubclassOverridesSelector(Class superclass, Class subclass, SEL selector){  Method superclassMethod = class_getInstanceMethod(superclass, selector);  Method subclassMethod = class_getInstanceMethod(subclass, selector);  IMP superclassIMP = superclassMethod ? method_getImplementation(superclassMethod) : NULL;  IMP subclassIMP = subclassMethod ? method_getImplementation(subclassMethod) : NULL;  return (superclassIMP != subclassIMP);}

又比如，ASBasicImageDownloader.mm利用Runtime动态为类NSURLRequest“添加“属性

@interface NSURLRequest (ASBasicImageDownloader)@property (nonatomic, strong) ASBasicImageDownloaderContext *asyncdisplaykit_context;@end@implementation NSURLRequest (ASBasicImageDownloader)static const char *kContextKey = NSStringFromClass(ASBasicImageDownloaderContext.class).UTF8String;- (void)setAsyncdisplaykit_context:(ASBasicImageDownloaderContext *)asyncdisplaykit_context{  objc_setAssociatedObject(self, kContextKey, asyncdisplaykit_context, OBJC_ASSOCIATION_RETAIN_NONATOMIC);}- (ASBasicImageDownloader *)asyncdisplaykit_context{  return objc_getAssociatedObject(self, kContextKey);}@end

---

Runloop的使用

问：Runloop和Runtime有啥关系？

答：没啥关系。

Runloop是一个和线程相关的技术，Runloop和线程一一绑定的。App启动的时候，默认启动一个main runloop来接收iOS系统的触摸，各种事件，响应端口来处理各种硬件相关。底层的Runloop实现就是一个for循环，不断的接受处理任务，没有任务的时候进行休眠。

通常，Runloop的使用场景有四个

1. 监听Main Runloop的状态，在主线程空闲的时候或者合适的时候去执行一些任务。
2. 把任务拆分成一个个小任务，依次提交到Runloop里执行。而不是，一个大任务去执行。大任务的执行会导致占用线程时间过多，导致之前所说的掉帧。
3. 创建一个后台等待执行任务的线程，并且开启Runloop来等待任务。
4. 根据Runloop的Mode来提交不同的任务，然后根据状态在Mode之前切换

Cocoa Touch的很多技术都和Runloop相关，比如CATransaction，NSTimer，AutoReleasePool等，对了，像这样的代码

dispatch_async(dispatch_get_main_queue(), ^ {    [self presentViewController:vc animated:YES completion:nil];});

是会推迟到下一个Runloop执行的。

AsyncDisplayKit中，是如何使用Runloop的呢？关于Runloop的核心使用代码，都可以在这个文件里找到
_ASAsyncTransactionGroup.m，它使用Runloop的模式是我上文提到的场景1，也就是监听MainRunloop的状态，在适当的时候，去更新UI。

对于Runloop理解比较差的同学，可以看看我之前写的这篇文章《 iOS SDK详解之Runloop。

监听Main Runloop的状态，

+ (void)registerTransactionGroupAsMainRunloopObserver:(_ASAsyncTransactionGroup *)transactionGroup{  ASDisplayNodeAssertMainThread();  static CFRunLoopObserverRef observer;  ASDisplayNodeAssert(observer == NULL, @"A _ASAsyncTransactionGroup should not be registered on the main runloop twice");  // defer the commit of the transaction so we can add more during the current runloop iteration  CFRunLoopRef runLoop = CFRunLoopGetCurrent();  CFOptionFlags activities = (kCFRunLoopBeforeWaiting | // before the run loop starts sleeping                              kCFRunLoopExit);          // before exiting a runloop run  CFRunLoopObserverContext context = {    0,           // version    (__bridge void *)transactionGroup,  // info    &CFRetain,   // retain    &CFRelease,  // release    NULL         // copyDescription  };  observer = CFRunLoopObserverCreate(NULL,        // allocator                                     activities,  // activities                                     YES,         // repeats                                     INT_MAX,     // order after CA transaction commits                                     &_transactionGroupRunLoopObserverCallback,  // callback                                     &context);   // context  CFRunLoopAddObserver(runLoop, observer, kCFRunLoopCommonModes);  CFRelease(observer);}

当调用这个方法的时候，每当Runloop进入kCFRunLoopBeforeWaiting或者kCFRunLoopExit的时候，_transactionGroupRunLoopObserverCallback回调就会执行。

Tips:之所以监听kCFRunLoopBeforeWaiting和kCFRunLoopExit是因为正常的UIKit就是监听Main Runloop，然后选择在Runloop这个时候进行渲染和界面的更新。AsyncDisplayKit同样监听这两个状态，但是优先级更低，所以会等到UIKit渲染结束了然后自己才会渲染。

在来看看这个回调

static void _transactionGroupRunLoopObserverCallback(CFRunLoopObserverRef observer, CFRunLoopActivity activity, void *info){  ASDisplayNodeCAssertMainThread();  _ASAsyncTransactionGroup *group = (__bridge _ASAsyncTransactionGroup *)info;  [group commit];}

可以看到，在监听到这两个状态的时候，AsyncDisplaykit调用了commit,来更新当前的状态转换组。也就是根据Runloop的状态来找到适合更新UI的机会－主线程相对空闲的时候。

---

总结

ASDisplay接近200个源文件，实在太大了，本文也只是管中窥豹，简单的记录下我的理解，而且它还在更新。对了,对于大多数开发者来说，目标是开发稳定流畅的App，所以不要重新造轮子。

后面有时间继续看开源代码写博客吧，React Native的博客写起来也好慢，慢慢来吧