ios - UICollectionView 使用 SDWebImage 滚动

Question

背景

我搜索了 SO 和苹果论坛。很多人都在谈论 collection view cell with image 的性能。他们中的大多数人说，自从在主线程中加载图像以来，滚动就滞后了。

通过使用 SDWebImage，图像应该在单独的线程中加载。但是，它仅在 iPad 模拟器的横向模式下存在延迟。

问题描述

在纵向模式下， Collection View 为每行加载 3 个单元格。而且它没有滞后或微不足道的延迟。在横向模式下， Collection View 为每行加载 4 个单元格。并且帧率有明显的滞后和下降。

我已经用核心动画检查了仪器工具。当出现新的单元格时，帧率下降到大约 8fps。我不确定是哪个行为导致 Collection View 的性能如此低下。

希望有人知道其中的技巧。

相关代码如下

在 View Controller 中

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ProductCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"ProductViewCell" forIndexPath:indexPath];

    Product *tmpProduct = (Product*)_ploader.loadedProduct[indexPath.row];

    cell.product = tmpProduct;

    if (cellShouldAnimate) {
        cell.alpha = 0.0;
        [UIView animateWithDuration:0.2
                              delay:0
                            options:(UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction)
                         animations:^{
                            cell.alpha = 1.0;
                         } completion:nil];
    }

    if(indexPath.row >= _ploader.loadedProduct.count - ceil((LIMIT_COUNT * 0.3)))
    {

        [_ploader loadProductsWithCompleteBlock:^(NSError *error){
            if (nil == error) {

                cellShouldAnimate = NO;
                [_collectionView reloadData];
                dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 2 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
                    cellShouldAnimate = YES;
                });
            } else if (error.code != 1){
                #ifdef DEBUG_MODE
                    ULog(@"Error.des : %@", error.description);
                #else
                    CustomAlertView *alertView = [[CustomAlertView alloc]
                                                  initWithTitle:@"Connection Error"
                                                        message:@"Please retry."
                                                   buttonTitles:@[@"OK"]];
                    [alertView show];
                #endif
            }
        }];
    }
    return cell;

}

在collectionViewCell中PrepareForReuse

- (void)prepareForReuse
{
    [super prepareForReuse];
    CGRect bounds = self.bounds;

    [_thumbnailImgView sd_cancelCurrentImageLoad];

    CGFloat labelsTotalHeight = bounds.size.height - _thumbnailImgView.frame.size.height;

    CGFloat brandToImageOffset = 2.0;
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        brandToImageOffset = 53.0;
    }

    CGFloat labelStartY = _thumbnailImgView.frame.size.height + _thumbnailImgView.frame.origin.y + brandToImageOffset;

    CGFloat nameLblHeight = labelsTotalHeight * 0.46;
    CGFloat priceLblHeight = labelsTotalHeight * 0.18;




    _brandLbl.frame = (CGRect){{15, labelStartY}, {bounds.size.width - 30, nameLblHeight}};


    CGFloat priceToNameOffset = 8.0;

    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        priceToNameOffset = 18.0;
    }

    _priceLbl.frame = (CGRect){{5, labelStartY + nameLblHeight  - priceToNameOffset}, {bounds.size.width-10, priceLblHeight}};

    [_spinner stopAnimating];
    [_spinner removeFromSuperview];
    _spinner = nil;

}

覆盖 setProduct 方法

- (void)setProduct:(Product *)product
{

    _product = product;

    _spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    _spinner.center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    [self addSubview:_spinner];
    [_spinner startAnimating];
    _spinner.hidesWhenStopped = YES;

    // Add a spinner

    __block UIActivityIndicatorView *tmpSpinner = _spinner;
    __block UIImageView *tmpImgView = _thumbnailImgView;
    ProductImage *thumbnailImage = _product.images[0];


    [_thumbnailImgView sd_setImageWithURL:[NSURL URLWithString:thumbnailImage.mediumURL]
                                completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
                                    // dismiss the spinner
                                    [tmpSpinner stopAnimating];
                                    [tmpSpinner removeFromSuperview];
                                    tmpSpinner = nil;
                                    if (nil == error) {

                                        // Resize the incoming images
                                        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
                                            CGFloat imageHeight = image.size.height;
                                            CGFloat imageWidth = image.size.width;

                                            CGSize newSize = tmpImgView.bounds.size;
                                            CGFloat scaleFactor = newSize.width / imageWidth;
                                            newSize.height = imageHeight * scaleFactor;

                                            UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
                                            [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
                                            UIImage *small = UIGraphicsGetImageFromCurrentImageContext();
                                            UIGraphicsEndImageContext();

                                            dispatch_async(dispatch_get_main_queue(),^{
                                                tmpImgView.image = small;
                                            });

                                        });


                                        if (cacheType == SDImageCacheTypeNone) {
                                            tmpImgView.alpha = 0.0;

                                            [UIView animateWithDuration:0.2
                                                                  delay:0
                                                                options:(UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction)
                                                             animations:^{
                                                                 tmpImgView.alpha = 1.0;
                                                             } completion:nil];
                                        }

                                    } else {
                                        // loading error
                                        [tmpImgView setImage:[UIImage imageNamed:@"broken_image_small"]];
                                    }
                                }];

    _brandLbl.text = [_product.brand.name uppercaseString];

    _nameLbl.text = _product.name;
    [_nameLbl sizeToFit];


    // Format the price
    NSNumberFormatter * floatFormatter = [[NSNumberFormatter alloc] init];
    [floatFormatter setNumberStyle:NSNumberFormatterDecimalStyle];
    [floatFormatter setDecimalSeparator:@"."];
    [floatFormatter setMaximumFractionDigits:2];
    [floatFormatter setMinimumFractionDigits:0];
    [floatFormatter setGroupingSeparator:@","];

    _priceLbl.text = [NSString stringWithFormat:@"$%@ USD", [floatFormatter stringFromNumber:_product.price]];

    if (_product.salePrice.intValue > 0) {
        NSString *rawStr = [NSString stringWithFormat:@"$%@ $%@ USD", [floatFormatter stringFromNumber:_product.price], [floatFormatter stringFromNumber:_product.salePrice]];

        NSMutableAttributedString * string = [[NSMutableAttributedString alloc] initWithString:rawStr];
        // Change all the text to red first
        [string addAttribute:NSForegroundColorAttributeName
                       value:[UIColor colorWithRed:157/255.0 green:38/255.0 blue:29/255.0 alpha:1.0]
                       range:NSMakeRange(0,rawStr.length)];

        // find the first space
        NSRange firstSpace = [rawStr rangeOfString:@" "];

        // Change from zero to space to gray color
        [string addAttribute:NSForegroundColorAttributeName
                       value:_priceLbl.textColor
                       range:NSMakeRange(0, firstSpace.location)];

        [string addAttribute:NSStrikethroughStyleAttributeName
                       value:@2
                       range:NSMakeRange(0, firstSpace.location)];

        _priceLbl.attributedText = string;
    }

}

Answer 1

SDWebImage 非常令人钦佩，但 DLImageLoader 绝对令人难以置信，并且是许多大型生产应用程序的关键部分

https://stackoverflow.com/a/19115912/294884

它非常易于使用。

为了避免略读问题，基本上只是在开始下载图像之前引入延迟。所以，本质上就像这样……就这么简单

dispatch_after_secs_on_main(0.4, ^
    {
    if ( ! [urlWasThen isEqualToString:self.currentImage] )
        {
        // so in other words, in fact, after a short period of time,
        // the user has indeed scrolled away from that item.
        // (ie, the user is skimming)
        // this item is now some "new" item so of course we don't
        // bother loading "that old" item
        // ie, we now know the user was simply skimming over that item.
        // (just TBC in the preliminary clause above,
        // since the image is already in cache,
        // we'd just instantly load the image - even if the user is skimming)
        // NSLog(@"   --- --- --- --- --- --- too quick!");
        return;
        }

    // a short time has passed, and indeed this cell is still "that" item
    // the user is NOT skimming, SO we start loading the image.
    //NSLog(@"   --- not too quick  ");

    [DLImageLoader loadImageFromURL:urlWasThen
            completed:^(NSError *error, NSData *imgData)
        {
        if (self == nil) return;

        // some time has passed while the image was loading from the internet...

        if ( ! [urlWasThen isEqualToString:self.currentImage] )
            {
            // note that this is the "normal" situation where the user has
            // moved on from the image, so no need toload.
            //
            // in other words: in this case, not due to skimming,
            // but because SO much time has passed,
            // the user has moved on to some other part of the table.
            // we pointlessly loaded the image from the internet!  doh!

            //NSLog(@"  === === 'too late!' image load!");
            return;
            }

        UIImage *image = [UIImage imageWithData:imgData];
        self.someImage.image = image;
        }];

    });

这是“极其简单”的解决方案。

IMO，经过大量实验后，它实际上比更复杂的解决方案效果要好得多在滚动浏览时进行跟踪。

再一次，DLImageLoader 让这一切变得极其简单 https://stackoverflow.com/a/19115912/294884

---

请注意，上面的代码部分只是您在单元格中加载图像的“常规”方式。

这是执行此操作的典型代码:

-(void)imageIsNow:(NSString *)imUrl
    {
    // call this routine o "set the image" on this cell.
    // note that "image is now" is a better name than "set the image"
    // Don't forget that cells very rapidly change contents, due to
    // the cell reuse paradigm on iOS.

    // this cell is being told that, the image to be displayed is now this image
    // being aware of scrolling/skimming issues, cache issues, etc,
    // utilise this information to apprporiately load/whatever the image.

    self.someImage.image = nil; // that's UIImageView
    self.currentImage = imUrl; // you need that string property

    [self loadImageInASecIfItsTheSameAs:imUrl];
    }


-(void)loadImageInASecIfItsTheSameAs:(NSString *)urlWasThen
    {

    // (note - at this point here the image may already be available
    // in cache.  if so, just display it. I have omitted that
    // code for simplicity here.)

    // so, right here, "possibly load with delay" the image
    // exactly as shown in the code above .....

    dispatch_after_secs_on_main(0.4, ^
       ...etc....
       ...etc....
    }

再一次，由于 DLImageLoader 非常棒，这一切都变得很容易。这是一个非常可靠的库。