使用UIImage的UICollectionView滚动性能很差

Question

我的应用程序中有一个UICollectionView,每个单元格都是UIImageView和一些文本标签.问题是当我让UIImageViews显示他们的图像时,滚动性能很糟糕.它远不如UITableView的滚动体验,甚至没有UIImageView的相同UICollectionView.

我几个月前发现了这个问题,似乎找到了答案,但它是用RubyMotion编写的,我不明白.我试着看看如何将它转换为Xcode,但由于我从未使用过NSCache,所以有点难.海报上有还指出了这里关于实施,除了他们的解决方案的东西,但我不知道在哪里把这些代码要么.可能是因为我不理解第一个问题的代码.

有人能帮助将其翻译成Xcode吗？

def viewDidLoad
  ...
  @images_cache = NSCache.alloc.init
  @image_loading_queue = NSOperationQueue.alloc.init
  @image_loading_queue.maxConcurrentOperationCount = 3
  ...
end

def collectionView(collection_view, cellForItemAtIndexPath: index_path)
  cell = collection_view.dequeueReusableCellWithReuseIdentifier(CELL_IDENTIFIER, forIndexPath: index_path)
  image_path = @image_paths[index_path.row]

  if cached_image = @images_cache.objectForKey(image_path)
    cell.image = cached_image
  else
    @operation = NSBlockOperation.blockOperationWithBlock lambda {
      @image = UIImage.imageWithContentsOfFile(image_path)
      Dispatch::Queue.main.async do
        return unless collectionView.indexPathsForVisibleItems.containsObject(index_path)
        @images_cache.setObject(@image, forKey: image_path)
        cell = collectionView.cellForItemAtIndexPath(index_path)
        cell.image = @image
      end
    }
    @image_loading_queue.addOperation(@operation)
  end
end

以下是第一个问题的提问者解决问题的第二个问题的代码:

UIImage *productImage = [[UIImage alloc] initWithContentsOfFile:path];

CGSize imageSize = productImage.size;
UIGraphicsBeginImageContext(imageSize);
[productImage drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
productImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

同样,我不确定如何/在哪里实现它.

非常感谢.

Answer 1

这是我遵循的模式.始终加载异步并缓存结果.当异步加载完成时,不要假设视图的状态.我有一个简化负载的类,如下所示:

//
//  ImageRequest.h

// This class keeps track of in-flight instances, creating only one NSURLConnection for
// multiple matching requests (requests with matching URLs).  It also uses NSCache to cache
// retrieved images.  Set the cache count limit with the macro in this file.

#define kIMAGE_REQUEST_CACHE_LIMIT  100
typedef void (^CompletionBlock) (UIImage *, NSError *);

@interface ImageRequest : NSMutableURLRequest

- (UIImage *)cachedResult;
- (void)startWithCompletion:(CompletionBlock)completion;

@end

//
//  ImageRequest.m

#import "ImageRequest.h"

NSMutableDictionary *_inflight;
NSCache *_imageCache;

@implementation ImageRequest

- (NSMutableDictionary *)inflight {

    if (!_inflight) {
        _inflight = [NSMutableDictionary dictionary];
    }
    return _inflight;
}

- (NSCache *)imageCache {

    if (!_imageCache) {
        _imageCache = [[NSCache alloc] init];
        _imageCache.countLimit = kIMAGE_REQUEST_CACHE_LIMIT;
    }
    return _imageCache;
}

- (UIImage *)cachedResult {

    return [self.imageCache objectForKey:self];
}

- (void)startWithCompletion:(CompletionBlock)completion {

    UIImage *image = [self cachedResult];
    if (image) return completion(image, nil);

    NSMutableArray *inflightCompletionBlocks = [self.inflight objectForKey:self];
    if (inflightCompletionBlocks) {
        // a matching request is in flight, keep the completion block to run when we're finished
        [inflightCompletionBlocks addObject:completion];
    } else {
        [self.inflight setObject:[NSMutableArray arrayWithObject:completion] forKey:self];

        [NSURLConnection sendAsynchronousRequest:self queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
            if (!error) {
                // build an image, cache the result and run completion blocks for this request
                UIImage *image = [UIImage imageWithData:data];
                [self.imageCache setObject:image forKey:self];

                id value = [self.inflight objectForKey:self];
                [self.inflight removeObjectForKey:self];

                for (CompletionBlock block in (NSMutableArray *)value) {
                    block(image, nil);
                }
            } else {
                [self.inflight removeObjectForKey:self];
                completion(nil, error);
            }
        }];
    }
}

@end

现在,单元格(集合或表格)更新非常简单:

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];

    NSURL *url = [NSURL URLWithString:@"http:// some url from your model"];
    // note that this can be a web url or file url

    ImageRequest *request = [[ImageRequest alloc] initWithURL:url];

    UIImage *image = [request cachedResult];
    if (image) {
        UIImageView *imageView = (UIImageView *)[cell viewWithTag:127];
        imageView.image = image;
    } else {
        [request startWithCompletion:^(UIImage *image, NSError *error) {
            if (image && [[collectionView indexPathsForVisibleItems] containsObject:indexPath]) {
                [collectionView reloadItemsAtIndexPaths:@[indexPath]];
            }
        }];
    }
    return cell;
}

Answer 2

通常,UICollectionViews或UITableViews的滚动行为会发生,因为单元格在iOS主线程中出列并构造.预先缓存单元格或在后台线程中构造它们几乎没有自由,而是在滚动阻止UI时将它们出列并构造.(就个人而言,我发现苹果公司的这个糟糕的设计尽管它确实简化了问题,因为你不必了解潜在的线程问题.我认为他们应该给一个钩子但是为UICollectionViewCell/UITableViewCell池提供一个自定义实现.可以处理单元格的出列/重用.)

性能下降的最重要原因确实与图像数据有关,并且(以递减的数量级)是我的经验:

• 下载图像数据的同步调用:总是以异步方式执行此操作,并在主线程中准备好时使用构造的图像调用[UIImageView setImage:]
• 同步调用从本地文件系统上的数据或其他序列化数据构造映像:也可以异步执行此操作.(例如[UIImage imageWithContentsOfFile:],[UIImage imageWithData:]等).
• 调用[UIImage imageNamed:]:第一次加载此图像时,它从文件系统提供.您可能希望预先缓存图像(只需在实际构建单元格之前加载[UIImage imageNamed:],以便可以立即从内存中提供它们.
• 调用[UIImageView setImage:]也不是最快的方法,但除非使用静态图像,否则通常无法避免.对于静态图像,使用不同的图像视图有时会更快,您可以将其设置为隐藏或不显示,具体取决于是否应显示它们而不是在同一图像视图上更改图像.
• 第一次单元格出列时,它可以从Nib加载,也可以使用alloc-init构造,并设置一些初始布局或属性(如果使用它们,也可能是图像).这在第一次使用单元格时会导致错误的滚动行为.

因为我对平滑滚动非常挑剔(即使它只是第一次使用单元格)我通过子类化UINib构建了一个整个框架来预先缓存单元格(这基本上是你进入iOS使用的出列过程的唯一钩子).但这可能超出了您的需求.