多线程-异步下载图片Demo

注意点及细节处理:
1. 耗时操作放在子线程:下载操作如果耗时较长,在主线程执行就会卡死主界面
2. 设置占位图:由于异步执行下载图片,在设置图片前Cell的数据源方法已经执行完毕,Cell的ImageView的frame为零,就会导致图片框不显示,滚动和点击Cell后显示图片

未设置占位图.gif

3. 图片缓存池:避免移动网络下重复下载图片,对已经下载的图片进行缓存处理,当刷新Cell时,从内存获取图片,执行效率更高,并且节省流量; 放在模型中的缺点是当内存紧张时,不方便清理缓存图片
4. 操作缓存池: 防止同一张图片多次下载
5. Cell图片混乱: 当异步操作耗时足够长,快速滚动Cell时,会从缓存池中获取Cell,这时的Cell中可能有未执行完的任务而导致图片换乱,解决办法就是在主线以无动画的方式程刷新TableView,而不是根据下载好的图片进行赋值(在刷新UI前,图片肯定已经下载完成并进行了缓存,刷新后会从缓存中提取图片)

Cell图片错乱.gif

6. 沙盒本地缓存图片
7. 使用block时注意循环引用问题

关键代码:

#import "JSAppsTableController.h"
#import "JSAppsModel.h"
#import "JSAppCell.h"

static NSString * const reuseIdentifier = @"reuseIdentifier";

@implementation JSAppsTableController{
    
    NSArray <JSAppsModel *>      *_data;             //  数据容器
    NSOperationQueue             *_queue;            //  全局队列
    NSMutableDictionary          *_operationCache;   //  操作缓存池
    NSMutableDictionary          *_imageCache;       //  图片缓存池
    NSString                     *_cachePath;        //  沙盒路径
    
}

- (instancetype)initWithFileName:(NSString *)fileName{
    self = [super init];
    if (self) {
        
        // 成员变量初始化
        _data = [JSAppsModel loadAppsDataWithFileName:fileName];
        _queue = [[NSOperationQueue alloc] init];
        _queue.maxConcurrentOperationCount = 5;
        _operationCache = [NSMutableDictionary dictionaryWithCapacity:5];
        _imageCache = [NSMutableDictionary dictionaryWithCapacity:5];
        _cachePath = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES).lastObject;
        
    }
    return self;
}

- (void)viewDidLoad{
    [super viewDidLoad];
    [self.tableView registerClass:[JSAppCell class] forCellReuseIdentifier:reuseIdentifier];
    
}

#pragma mark -- UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return _data.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    JSAppCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier forIndexPath:indexPath];
    
    JSAppsModel *model = _data[indexPath.row];
    cell.textLabel.text = model.name;
    cell.detailTextLabel.text = model.download;
    
    // 设置占位图
    cell.imageView.image = [UIImage imageNamed:@"user_default"];
    
    // 从缓存中取出图片
    if ([_imageCache objectForKey:model.icon]) {
        cell.imageView.image = [_imageCache objectForKey:model.icon];
        NSLog(@"从内存图片缓存池中获取图片");
        return cell;
    }
    
    // 从沙盒中获取图片
    NSData *data = [NSData dataWithContentsOfFile:[_cachePath stringByAppendingPathComponent:model.icon.lastPathComponent]];
    if (data) {
        cell.imageView.image = [UIImage imageWithData:data];
        
        // 进行内存缓存
        [_imageCache setObject:[UIImage imageWithData:data] forKey:model.icon];
        
        NSLog(@"从本地沙盒获取图片:(%@)",[_cachePath stringByAppendingPathComponent:model.icon.lastPathComponent]);
        return cell;
    }
    
    // 判断操作是否存在
    if ([_operationCache objectForKey:model.icon]) {
        NSLog(@"图片正在下载中...");
        return cell;
    }
    
    /*    block内部使用self,不能够说一定存在循环引用
         self -> _operationCache和_queue -> downLoadImageOperation -> block -> self
            _operationCache     ->    手动清除downLoadImageOperation
            _queue              ->    当队列中的操作执行完毕后downLoadImageOperation会自动销毁
     */
    //__weak typeof(self) weakSelf = self;
    
    
    // 异步下载图片
    NSBlockOperation *downLoadImageOperation = [NSBlockOperation blockOperationWithBlock:^{
        
        [NSThread sleepForTimeInterval:5]; // 模拟延迟
        
        // 下载图片
        NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:model.icon]];
        UIImage *image = [UIImage imageWithData:data];
        
        // 将下载好的图片进行内存缓存
        // model.downloadImage = image;
        [_imageCache setObject:image forKey:model.icon];
        
        // 将下载好的图片做本地缓存
        [data writeToFile:[_cachePath stringByAppendingPathComponent:model.icon.lastPathComponent] atomically:YES];
        
        // 返回主线程刷新UI
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
            
            // cell.imageView.image = image; 避免重用Cell中有正在执行的下载操作导致图片混乱,直接刷新TableView从内存获取图片
            [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
            
            // 清除操作缓存池中对应的操作
            [_operationCache removeObjectForKey:model.icon];
            
            /*      [_operationCache removeAllObjects];
             假设操作的完成时间足够长,因为下载操作异步执行,CPU会随机执行线程上的操作,如果设置了优先级或执行某一线程的概率较高,那么可以肯定,完成有先后,只是不够明显
             一旦某个操作提前完成执行了清空操作缓存池,当再次滚动TableView的时候,可能还会出现同一个下载操作重复添加到队列中的问题
             所以不应该使用removeAllObjects方法来移除
             */
            
        }];
    }];
    
    // 将操作添加到队列中: 队列当中的操作执行完毕之后,会自动从队列中销毁
    [_queue addOperation:downLoadImageOperation];
    
    // 将每一个下载图片的操作都添加到操作缓存池中(如果操作已经存在,就不再重复执行)
    [_operationCache setObject:downLoadImageOperation forKey:model.icon];
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    return 68;
}

#pragma mark -- UITableViewDataDelegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    
    NSLog(@"----->ImageCacheCounts:%zd ----> OperationCacheCounts:%zd ---->CurrentOperationCounts:%zd",_imageCache.count,_operationCache.count,_queue.operationCount);
    
}

- (void)dealloc{
    NSLog(@"%s",__func__);
}

- (void)didReceiveMemoryWarning{
//    [super didReceiveMemoryWarning];
    [_imageCache removeAllObjects];
    
}


@end

源代码:https://github.com/ShenYj/AsyncDownLoadImageDemo