前言
AsyncDisplayKit 是一个UI框架，最初诞生于 Facebook 的 Paper 应用程序。它是为了解决 Paper 团队面临的核心问题之一：尽可能缓解主线程的压力。它能在异步线程绘制修改UI，然后统一添加进内存渲染出来。
解决的问题
主要解决的问题就是操作页面过程中的保持帧率在60fps（理想状态下）的问题。
造成卡顿的原因有很多，总结一句话基本上就是：
CPU或GPU消耗过大，导致在一次同步信号之间没有准备完成，没有内容提交，导致掉帧的问题。
原理：
- 布局：
iOS自带的Autolayout在布局性能上存在瓶颈，并且只能在主线程进行计算。（参考Auto Layout Performance on iOS）因此ASDK弃用了Autolayout，自己参考自家的ComponentKit设计了一套布局方式。 - 渲染
对于大量文本，图片等的渲染，UIKit组件只能在主线程并且可能会造成GPU绘制的资源紧张。ASDK使用了一些方法，比如==图层的预混合等，并且异步的在后台绘制图层，不阻塞主线程的运行==。 - 系统对象创建与销毁
UIKit组件封装了CALayer图层的对象，在创建、调整、销毁的时候，都会在主线程消耗资源。ASDK自己设计了一套Node机制，也能够调用。
使用方法
UITableView
#import <AsyncDisplayKit/AsyncDisplayKit.h>
#import "PhotoModel.h"
#import "TableCellNode.h"
@interface ASDKTableViewController () <ASTableDelegate, ASTableDataSource>
@property (nonatomic, strong) ASTableNode *tableNode;
@end
@implementation ASDKTableViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"ASTableNode";
[self initViews];
}
- (void)initViews {
self.tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain];
_tableNode.dataSource = self;
_tableNode.delegate = self;
_tableNode.frame = self.view.bounds;
[self.view addSubnode:_tableNode]; //等效：[self.view addSubview:_tableNode.view];
//ASTableNode 不会暴露所有UITableView的的属性，所以你必须通过 tableNode 底层的 UITableView 实例去设置 UITableView 的特殊属性。
_tableNode.view.separatorStyle = UITableViewCellSeparatorStyleNone;
//无限滚动需要
//将 leadingScreensForBatching 设置为 1.0 表示当用户滚动还剩 1 个全屏就到达页尾时，开始抓取新的一批数据。
self.tableNode.view.leadingScreensForBatching = 1.0; // default of 2.0
}
#pragma mark - TableNode Delegate
- (NSInteger)tableNode:(ASTableNode *)tableNode numberOfRowsInSection:(NSInteger)section {
return _dataArray.count;
}
/**
* 不支持复用
* 该方法优先于 tableNode:nodeForRowAtIndexPath:
*/
- (ASCellNodeBlock)tableNode:(ASTableNode *)tableNode nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath {
PhotoModel *model = [[PhotoModel alloc] init];
model.text = [NSString stringWithFormat:@"Row : %ld", indexPath.row];
model.imgUrl = _dataArray[indexPath.row];
// this may be executed on a background thread - it is important to make sure it is thread safe
ASCellNode *(^cellBlock)() = ^ASCellNode *() {
TableCellNode *cellNode = [[TableCellNode alloc] initWithData:model];
return cellNode;
};
return cellBlock;
}
//添加约束
- (ASSizeRange)tableNode:(ASTableNode *)tableNode constrainedSizeForRowAtIndexPath:(NSIndexPath *)indexPath {
CGFloat width = [UIScreen mainScreen].bounds.size.width;
CGSize min = CGSizeMake(width, 380);
CGSize max = CGSizeMake(width, CGFLOAT_MAX);
return ASSizeRangeMake(min, max);
}
//点击事件
- (void)tableNode:(ASTableNode *)tableNode didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableNode deselectRowAtIndexPath:indexPath animated:YES];
}
UICollectionView
#import <AsyncDisplayKit/AsyncDisplayKit.h>
#import <SDWebImage/UIImageView+WebCache.h>
#import "CollectionCellNode.h"
#import "PhotoModel.h"
@interface ASDKCollectionViewController () <ASCollectionDelegate, ASCollectionDataSource, UICollectionViewDelegateFlowLayout>
@property (nonatomic, strong) ASCollectionNode *collectionNode;
@end
@implementation ASDKCollectionViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"ASDKCollectionView";
[self initViews];
}
- (void)initViews {
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.minimumInteritemSpacing = 7;
flowLayout.minimumLineSpacing = 8;
self.collectionNode = [[ASCollectionNode alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
_collectionNode.backgroundColor = [UIColor whiteColor];
_collectionNode.dataSource = self;
_collectionNode.delegate = self;
//不支持复用
// [_collectionNode.view registerClass:[CollectionCellNode class] forCellWithReuseIdentifier:@"collectID"];
[self.view addSubnode:_collectionNode];
YYFPSLabel *fpsLabel = [YYFPSLabel new];
fpsLabel.frame = CGRectMake(200, 200, 50, 30);
[self.view addSubview:fpsLabel];
}
#pragma mark - ASCollectionNode Delegate
- (NSInteger)collectionNode:(ASCollectionNode *)collectionNode numberOfItemsInSection:(NSInteger)section {
return _dataArray.count;
}
- (ASCellNodeBlock)collectionNode:(ASCollectionNode *)collectionNode nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath {
PhotoModel *model = [[PhotoModel alloc] init];
model.text = [NSString stringWithFormat:@"Row : %ld", indexPath.row];
model.imgUrl = _dataArray[indexPath.row];
return ^() {
CollectionCellNode *cellNode = [[CollectionCellNode alloc] initWithData:model];
return cellNode;
};
}
//添加约束
- (ASSizeRange)collectionNode:(ASCollectionNode *)collectionNode constrainedSizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat width = ([UIScreen mainScreen].bounds.size.width - 32) / 3;
CGSize min = CGSizeMake(width, width);
CGSize max = CGSizeMake(width, width);
return ASSizeRangeMake(min, max);
}
//设置Cell间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(8, 8, 8, 8);
}
@end
