表视图滚动异步

Question

我正在将图像加载到表格视图单元格中，每个单元格都有一个图像。我已经为下面的代码调整了几个教程，但我的速度仍然很慢。

我正在从文档目录加载这些图像。有关如何加快此过程的任何提示或想法？

编辑修改后的代码：

Beer *beer = (Beer *) [self.fetchedResultsController objectAtIndexPath:indexPath];
cell.displayBeerName.text = beer.name;

// did we already cache a copy of the image?
if (beer.image != nil) {
    // good.  use it.  this will run quick and this will run most of the time
    cell.beerImage.image = beer.image;
} else {
    // it must be the first time we've scrolled by this beer.  do the expensive
    // image init off the main thread

    cell.beerImage.image  = nil;   // set a default value here.  nil is good enough for now

    [self loadImageForBeer:beer atIndexPath:indexPath];
}
- (void)loadImageForBeer:(Beer *)beer atIndexPath:(NSIndexPath *)indexPath {

    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
    dispatch_async(queue, ^{

        UIImage *image = [UIImage imageWithContentsOfFile:beer.imagePath];
        beer.image = image;

        dispatch_sync(dispatch_get_main_queue(), ^{
            UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
            cell.beerImage.image = image;
        });
    });
}

Answer 1

你的算法看起来不错。您已经避免了许多典型的陷阱。如果您仍然遇到 UI 性能问题，我建议您做几件事：

1. 您应该尝试将图像缓存在内存中。您可以使用NSMutableArray 或NSMutableDictionary，但在Best way to cache images on ios app? Caleb 讨论了NSCache 类的优点，它简化了流程。如果您缓存图像，请确保响应内存压力并在必要时清除缓存。您可以回复didReceiveMemoryWarning或将自己添加为通知中心的UIApplicationDidReceiveMemoryWarningNotification的观察者。

2. 确保您的缓存图像是缩略图大小，否则您的 UI 中总会出现一些卡顿（如果您需要调整大小算法，请告诉我们），这会不必要地占用内存；

3. 当您将图像更新分派回主队列时，您应该异步执行此操作（为什么后台队列在等待块被发送回主队列时会挂起并占用资源完成......一旦您在快速滚动期间备份了几个图像，这尤其是一个问题）；和

1234563从理论上讲，您可以让有问题的单元格滚出屏幕，您的算法可能会崩溃）。

我使用的算法与您的非常相似，具有几乎相同的 GCD 结构（具有上述注意事项），并且滚动非常流畅，即使在旧设备上也是如此。如果您希望我发布代码，我很乐意。

如果您仍然遇到问题，CPU 分析器非常适合识别瓶颈并让您知道应该将注意力集中在哪里。网上有一些很棒的 WWDC 会议，重点介绍如何使用 Instruments 来识别性能瓶颈，我发现它们对熟练使用 Instruments 非常有帮助。

这是我的代码。在viewDidLoad，我初始化了我的图片缓存：

- (void)initializeCache
{
    self.imageCache = [[NSCache alloc] init];
    self.imageCache.name = @"Custom Image Cache";
    self.imageCache.countLimit = 50;
}

然后我在我的tableView:cellForRowAtIndexPath 中使用它：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"ilvcCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    // set the various cell properties

    // now update the cell image

    NSString *imagename = [self imageFilename:indexPath]; // the name of the image being retrieved

    UIImage *image = [self.imageCache objectForKey:imagename];

    if (image)
    {
        // if we have an cachedImage sitting in memory already, then use it

        cell.imageView.image = image;
    }
    else
    {
        cell.imageView.image = [UIView imageNamed:@"blank_image.png"];

        // the get the image in the background

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

            // get the UIImage

            UIImage *image = [self getImage:imagename];

            // if we found it, then update UI

            if (image)
            {
                dispatch_async(dispatch_get_main_queue(), ^{

                    // if the cell is visible, then set the image

                    UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
                    if (cell)
                        cell.imageView.image = image;

                    [self.imageCache setObject:image forKey:imagename];
                });
            }
        });
    }

    return cell;
}

和

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];

    [self.imageCache removeAllObjects];
}

顺便说一句，您可能考虑的进一步优化是将缓存的图像预加载到单独的队列中，而不是在单独的线程中即时加载图像。我认为没有必要，因为这对我来说似乎已经足够快了，但它是加快 UI 速度的另一种选择。

Answer 2

对于初始加载，您在此处无能为力，您的速度差不多。 如果仍然太慢，请尝试加载较小的图像。

有几点：

首先，小心使用 -imageWithContentsOfFile，它不会缓存任何内容。每次加载图像时，您都会受到全部打击，而不是 -imageNamed 会使图像在某些缓存中保持温暖。 您当然可以将其缓存在您的域对象中，但我个人强烈建议不要这样做。 你的内存占用会飞涨，迫使你实现自己的缓存过期机制，而苹果通过 -imageNamed 有一个非常好的图像缓存。 如果你能在所有 3 个系列的设备上做得比苹果更好，我会感到惊讶:)

那么，你在这里打破了 UITableView 的享元模式：

dispatch_sync(dispatch_get_main_queue(), ^{
            cell.beerImage.image = image;
            beer.image = image;
            [cell setNeedsLayout];
        });

要求表格视图在给定索引处提供您的单元格，而不是捕获块中的单元格：在加载图像时，该单元格实例实际上可能已被重用于另一个索引路径，您将在错误的单元格中显示图像。

而且这里不需要-setNeedsLayout，换个图片就够了。

编辑：哎呀！我错过了表格视图中图像的明显之处。你的图片有多大，图片视图有多大，图片上的内容模式是什么？ 如果您的图像与图像视图的大小非常不同，并且您要求图像视图调整大小，这将发生在主线程上，并且您将在那里获得大量性能。 加载后，将图像大小调整为关闭线程的图像视图（快速谷歌搜索将为您提供执行此操作的核心图形代码）。

Answer 3

缺少的步骤是使用获取的图像更新模型。实际上，您每次都在为每个单元进行新的加载。该模型是缓存相对昂贵的负载结果的正确位置。你能添加一个 Beer.image 属性吗？

然后，您的配置代码将如下所示：

Beer *beer = (Beer *) [self.fetchedResultsController objectAtIndexPath:indexPath];
cell.displayBeerName.text = beer.name;

// did we already cache a copy of the image?
if (beer.image != nil) {
    // good.  use it.  this will run quick and this will run most of the time
    cell.beerImage.image = beer.image;
} else {
    // it must be the first time we've scrolled by this beer.  do the expensive
    // image init off the main thread

    cell.beerImage.image  = nil;   // set a default value here.  nil is good enough for now

    [self loadImageForBeer:beer atIndexPath:indexPath];
}

为了清楚起见，将加载器逻辑移到此处...

- (void)loadImageForBeer:(Beer *)beer atIndexPath:(NSIndexPath *)indexPath {

    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
    dispatch_async(queue, ^{

        UIImage *image = [UIImage imageWithContentsOfFile:beer.imagePath];
        beer.image = image;

        dispatch_sync(dispatch_get_main_queue(), ^{
            UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
            cell.beerImage.image = image;
        });
    });
}

Answer 4

你可以看看这个问题，以前在堆栈溢出时回答过。

UIImage in uitableViewcell slowdowns scrolling table

或者试试这个代码

- (void)configureCell:(BeerCell *)cell 
          atIndexPath:(NSIndexPath *)indexPath 
{
    Beer *beer = (Beer *) [self.fetchedResultsController objectAtIndexPath:indexPath];
    cell.displayBeerName.text = beer.name;

           UIImage *image = [UIImage imageWithContentsOfFile:beer.imagePath];

            cell.beerImage.image = image;
            [cell setNeedsLayout];
        }