解决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

@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 _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

OC版解决AsyncDisplayKit闪烁问题

解决Texture(原AsyncDisplayKit)的闪烁问题

AsyncDisplayKit 概览

你可能感兴趣的:(OC版解决AsyncDisplayKit闪烁问题)