解决Texture(原AsyncDisplayKit)的闪烁问题
AsyncDisplayKit 概览
本文借鉴原文
Facebook 的Paper团队给我们带来另一个很棒的库：AsyncDisplayKit。这个库能让你通过将图像解码、布局以及渲染操作放在后台线程，从而带来超级响应的用户界面，也就是说不再会因界面卡顿而阻断用户交互。
初次使用, 当享受其一帧不掉如丝般柔滑的手感时，ASTableNode和ASCollectionNode刷新时的闪烁一定让你几度崩溃，到AsyncDisplayKit的github上搜索闪烁相关issue，会出来100多个问题。闪烁是AsyncDisplayKit与生俱来的问题，闻名遐迩，而闪烁的体验非常糟糕。幸运的是，几经探索，AsyncDisplayKit的闪烁问题已经完美解决，这个完美指的是一帧不掉的同时没有任何闪烁，同时也没增加代码的复杂度。
本篇文章将着重讲解闪烁问题以及对应的解决方案。
AsyncDisplayKit的闪烁总体上分为两大类，
1）ASNetworkImageNode reload时的闪烁
当ASCellNode中包含ASNetworkImageNode时，reload这个cell, ASNetworkImageNode会异步从网络请求或者本地缓存中获取图片，请求到图片后再设置ASNetworkImageNode展示图片，但在异步过程中，ASNetworkImageNode会展示PlaceHolderImage, 从PlaceHolderImage->fetched image的展示替换导致闪烁发生，即使整个cell的数据不变， reload时由于图片的加载逻辑依然不变，仍然会闪烁，对比我们常用的SDWebImage和YYWebImage, 它们的设置逻辑是先同步检查是否有本地缓存，有直接显示，没有则展示placeholderImage， 等待加载完成再显示加载图片，展示逻辑即memory Cached image->placeholderImage->fetched image的逻辑，刷新的时候优先级的不同，因此不会闪烁。
AsyncDisplayKit官方给的修复思路是：
ASNetworkImageNode *imageNode = [ASNetworkImageNode new];
imageNode.placeholderFadeDuration = 3;
imageNode.placeholderColor = [UIColor redColor];
这样修改后，确实没有闪烁，但要的效果并不是我们想要的，这只是将闪烁问题用时间控制到3秒而已，并没有实际解决问题。
上面说到SDWebImage和YYWebImage的设置思路，可以给我们提供一定的思考，如果我们继承一个ASNetworkImageNode, 将ASNetworkImageNode的设置逻辑改为有cached image展示cache image，没有则重新从网络请求，不是完美解决闪烁了嘛？！但事实并非如此，无论你怎么设置，同样都会闪烁。而我们知道在ASImageNode并不会出现这种问题，为什么不考虑适当的时机进行替换呢，当我们有缓存的时候直接用ASImageNode替换ASNetworkImgeNode, 在这里可能有人会问，这样整个cellNode的控件已经改变了！！！刷新怎么办？这其实和ASTableNode的展示机制有关系，它并不是类似tableView的cell重用机制，它所做的是每一个cellNode都是异步渲染加载的，重新刷新意味着控件的重新排列（最直白的话，没有用专业的术语）。言归正传，这里我们用最熟悉的YYImageCache桥接缓存问题，方便自由管理缓存问题, 看解决方案：
```
@interface JSWebImageManager : YYWebImageManager<ASImageCacheProtocol, ASImageDownloaderProtocol>
@end
```
#import "JSWebImageManager.h"
@implementation JSWebImageManager
- (id)downloadImageWithURL:(NSURL *)URL callbackQueue:(dispatch_queue_t)callbackQueue downloadProgress:(ASImageDownloaderProgress)downloadProgress completion:(ASImageDownloaderCompletion)completion{
@autoreleasepool {
YYWebImageManager *manager = [YYWebImageManager sharedManager];
__weak YYWebImageOperation *operation = nil;
operation = [manager requestImageWithURL:URL
options:YYWebImageOptionSetImageWithFadeAnimation
progress:^(NSInteger receivedSize, NSInteger expectedSize) {
}
transform:nil
completion:^(UIImage * _Nullable image, NSURL * _Nonnull url, YYWebImageFromType from, YYWebImageStage stage, NSError * _Nullable error) {
completion(image, error, operation);
}];
return operation;
}
}
- (void)cancelImageDownloadForIdentifier:(id)downloadIdentifier {
if (![downloadIdentifier isKindOfClass:[YYWebImageOperation class]]) {
return;
}
[(YYWebImageOperation *)downloadIdentifier cancel];
}
- (void)cachedImageWithURL:(NSURL *)URL callbackQueue:(dispatch_queue_t)callbackQueue completion:(ASImageCacherCompletion)completion {
[self.cache getImageForKey:[self cacheKeyForURL:URL] withType:(YYImageCacheTypeAll) withBlock:^(UIImage * _Nullable image, YYImageCacheType type) {
completion(image);
if (image) {
dispatch_async(callbackQueue, ^{
completion(image);
});
} else {
dispatch_async(callbackQueue, ^{
[self downloadImageWithURL:URL callbackQueue:callbackQueue downloadProgress:^(CGFloat progress) {
} completion:^(id<ASImageContainerProtocol> _Nullable image, NSError * _Nullable error, id _Nullable downloadIdentifier) {
if (image) {
completion(image);
}
}];
});
}
}];
}
@end
```
自定义JPNetworkImageNode(继承自ASDisplayNode), 代替我们常用的ASNetworkImageNode,相关常用属性如下
/** 网络地址 */
@property (nonatomic, copy) NSURL *URL;
/** 转场color */
@property (nonatomic, strong)UIColor *placeholderColor;
/** 静态image */
@property (nonatomic, strong)UIImage *image;
/** 转场时间 */
@property (nonatomic, assign)NSTimeInterval js_placeholderFadeDuration;
/** 空置图片 */
@property (nonatomic, strong)UIImage *defaultImage;
/**
网络图片
*/
@property (nonatomic, strong) ASNetworkImageNode *netImgNode;
/**
本地图片
*/
@property (nonatomic, strong) ASImageNode *imageNode;
```
#import "JSNetworkImageNode.h"
#import "JSWebImageManager.h"
@implementation JSNetworkImageNode
- (instancetype)init{
self = [super init];
if (self) {
[self addSubnode:self.netImgNode];
[self addSubnode:self.imageNode];
}
return self;
}
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:(UIEdgeInsetsZero) child:!self.netImgNode.URL ? self.imageNode : self.netImgNode];
}
- (ASNetworkImageNode *)netImgNode{
if (!_netImgNode) {
_netImgNode = [[ASNetworkImageNode alloc] initWithCache:JSWebImageManager.sharedManager downloader:JSWebImageManager.sharedManager];
}
return _netImgNode;
}
- (ASImageNode *)imageNode{
if (!_imageNode) {
_imageNode = [[ASImageNode alloc] init];
}
return _imageNode;
}
- (void)setURL:(NSURL *)URL{
_URL = URL;
if ([YYImageCache.sharedCache containsImageForKey:[YYWebImageManager.sharedManager cacheKeyForURL:URL]]) {
self.imageNode.image = [YYImageCache.sharedCache getImageForKey:[YYWebImageManager.sharedManager cacheKeyForURL:URL]];
} else {
self.netImgNode.URL = _URL;
}
}
- (void)setPlaceholderColor:(UIColor *)placeholderColor{
self.netImgNode.placeholderColor = placeholderColor;
}
- (void)setImage:(UIImage *)image{
self.netImgNode.image = image;
}
- (void)setDefaultImage:(UIImage *)defaultImage{
self.netImgNode.defaultImage = defaultImage;
}
- (void)setJs_placeholderFadeDuration:(NSTimeInterval)js_placeholderFadeDuration{
self.netImgNode.placeholderFadeDuration = js_placeholderFadeDuration;
}
@end
使用时将JPNetworkImageNode当做ASNetworkImageNode即可
2）reloadCell和reloadData引起的闪烁
当reloadASTableNode或者ASCollectionNode的某个indexPath的cell时，也会闪烁。原因和ASNetworkImageNode很像，都是异步惹的祸。当异步计算cell的布局时，cell使用placeholder占位（通常是白图），布局完成时，才用渲染好的内容填充cell，placeholder到渲染好的内容切换引起闪烁。UITableViewCell因为都是同步，不存在占位图的情况，因此也就不会闪。
这个官方给出的解决方案是：
cellNode.neverShowPlaceholders = YES;
这样设置以后，会让cell从异步加载衰退会同步状态，若reload某个indexPath的cell, 在渲染完成之前，主线程是卡死的，这就和tableView原始的加载方式一样了，但会比tableView速度快很多，因为UITableView的布局计算、资源解压、视图合成等都是在主线程进行，而ASTableNode则是多个线程并发进行，何况布局等还有缓存。但当页面布局很多，刷新cell很多的时候，下拉掉帧就比较明显，但我们知道ASTableNode具有预加载的相关设置，可以设置leadingScreensForBatching减缓卡顿，但仍然不完美，时间换空间而已。我们要做到的是该异步的异步，又能不卡顿，又可以预加载。为此提供解决方案：
#import@interface ASTableNode (ReloadIndexPaths)
@property (nonatomic, copy) NSArray *js_reloadIndexPaths;//需要刷新的indexPath
@end
import "ASTableNode+reloadIndexPaths.h"
#importstatic void *strKey = &strKey;
@implementation ASTableNode (reloadIndexPaths)
- (void)setJs_reloadIndexPaths:(NSArray *)js_reloadIndexPaths{
objc_setAssociatedObject(self, &strKey, js_reloadIndexPaths, OBJC_ASSOCIATION_COPY_NONATOMIC);
}
- (NSArray *)js_reloadIndexPaths{
return objc_getAssociatedObject(self, &strKey);
}
@end
在此对ASTableNode类目添加新的属性js_reloadIndexPaths，需要刷新的indexPath
ASCellNode *(^ASCellNodeBlock)(void) = ^ASCellNode *() {
ImageCellNode *cellNode = [[ImageCellNode alloc] initWithModel:_viewModel.dataArray[indexPath.row]];
if ([tableNode.js_reloadIndexPaths containsObject:indexPath]) {
cellNode.neverShowPlaceholders = YES;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
cellNode.neverShowPlaceholders = NO;
});
} else {
cellNode.neverShowPlaceholders = NO;
}
return cellNode;
};
return ASCellNodeBlock;
reload单个indexPath
_tableNode.js_reloadIndexPaths = @[indexPath];
[_tableNode reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationNone)];
reload整个tableNode
_tableNode.js_reloadIndexPaths = _tableNode.indexPathsForVisibleRows;
[self.tableNode reloadData];
我们将需要刷新的indexPath放入js_reloadIndexPaths, 加以判断设置该indexPath回归主线程，当渲染完毕后再设置可以异步加载，0.5秒的时间足以渲染完毕，这样就完美实现该异步异步，该同步同步，完美解决闪烁问题。如丝般滑顺。。。
该文在原作者的基础上加入了自己的理解，主要解决运用AsyncDisplayKit所导致的闪烁问题，欢迎大家提出问题，共同交流。
提示:由于个人对源码的实验分析, 导致原来下载崩溃(现在已经不存在该问题), 可在ImageCellNode.m中将_imageNode.view.contentMode = UIViewContentModeScaleAspectFill;该行注释掉.主要是该方法必须在主线程中运行, 如果想更改该属性, 可在didload方法中调整;最新demo 地址链接:demo 密码:aq6n
