NSOPeration 之UItabView无沙盒缓存——UITabView下载图片后从操作缓冲池清除下载操作...-优快云博客

本文介绍了一种图片下载及缓存的优化方案，通过使用异步下载、占位图、MVC架构、操作缓冲池等技术手段解决了网速慢、图片加载延迟等问题，有效提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当数据很大，即使是2000条数据。存放下载操作的缓冲池也会非常大，仍然需要及时清理一下。

清理的步骤：在一个图片下载完成后，就根据图片的链接在存放下载操作的缓冲池中删除此图片的操作。

问题回顾总结：

问题1：如果网速比较慢，会很卡

解决方法：使用异步下载

问题2：图片没有Frame，所有cell初始化的时候，给imageView的frame是0。异步下载完之后不显示解决办法：使用占位图（如果展位图比较大,自定义cell可以解决）

问题3：如果图片下载速度不一致，同时用户快速滚动的时候，会因为Cell的重用导致图片混乱

解决方法：MVC，使用Model（模型）保存下载的图像，再次刷新表格。

问题4：在用户快速滚动的时候，会重复添加下载任务到下载队列。

解决方法：建立下载操作的缓冲池。首先检查缓冲池里是否有当前图片的下载操作。有的话就不创建下载操作。从而保证一张图片只添加一个下载操作。其实就是建立一个全局的字典属性。

问题5：将图片保存到模型里的优缺点

优点：不用重复下载，利用MVC刷新表格，不会造成数据混乱，加载速度比较快

缺点：内存，所有下载好的图像都会记录在模型里。如果数据比较多（2000）个就会造成内存警告。

-***图像根模型耦合性太强。导致清理内存非常困难

解决办法：模型跟图像分开。在控制器里做缓存。

问题6：下载操作缓冲池会越来越大。需要及时清理。

原理图如下所示：

思路剖析如下所示：

在控制器建立一个图片缓存池即一个可变字典imageCache——字典的key用来存放图片的链接地址，值为对应的图片对象即UIImage对象，并以懒加载的方式创建。开始是为空的。再创建一个存放下载操作的缓存池也是一个可变的字典operations，字典的键存放图片的链接地址，值为对应的图片下载操作即NSOperations对象，开始也是为空的。

执行流程如上图所示，开始会根据图片的下载地址从imageCache中寻找图片UIImage对象，图片对象不存在会显示占位图，然后根据图片的下载地址查看Operations即存放操作的缓存池是否存在当前图片的下载操作，开始时是不存在的，然后创建下载操作放到存放操作的缓存池中，然后缓存池中就存在了操作对象。如下图所示：

在一个操作执行完毕后，将对应的图片对象保存到图片缓存池中，并将此操作从操作缓冲池中移除如下图状态所示：

然后执行表格的单元格刷新，单元格刷新会初始化Cell，回到起点重新判断并设置数据，如下所示：

代码基本不做大的修改。在原来的基础之上修改一处即可

CZApp.h

<span style="font-size:18px;">//
//  CZApp.h
//  NSoperation之网络图片下载
//
//  Created by apple on 15/10/23.
//  Copyright (c) 2015年 LiuXun. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CZApp : NSObject
@property(nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *icon;
@property (nonatomic, strong) NSString *download;

/**
 保存网络下载的图像
 */
// @property(nonatomic, strong) UIImage *image;

+(instancetype) appWithDict:(NSDictionary *) dict;
@end</span>

CZApp.m

<span style="font-size:18px;">//
//  CZApp.m
//  NSoperation之网络图片下载
//
//  Created by apple on 15/10/23.
//  Copyright (c) 2015年 LiuXun. All rights reserved.
//

#import "CZApp.h"

@implementation CZApp
+(instancetype) appWithDict:(NSDictionary *) dict
{
    CZApp *app = [[self alloc] init];
    [app setValuesForKeysWithDictionary:dict];
    return app;
}
@end</span>

viewController.m

<span style="font-size:18px;">//
//  ViewController.m
//  NSoperation之网络图片下载
//
//  Created by apple on 15/10/23.
//  Copyright (c) 2015年 LiuXun. All rights reserved.
//

#import "ViewController.h"
#import "CZApp.h"
@interface ViewController ()
// plist文件数据的容器
@property (nonatomic, strong) NSArray *appList;

// 管理下载的全局队列
@property (nonatomic, strong) NSOperationQueue *opQueue;

/**所有下载的缓冲池*/
@property (nonatomic, strong) NSMutableDictionary *operationCache;

/**保存所有图像的缓存*/
@property (nonatomic, strong) NSMutableDictionary *imageCache;
@end


@implementation ViewController

// 懒加载
-(NSArray *)appList
{
    if (_appList == nil) {
        NSArray *dicArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil]];
        // 字典转模型
        NSMutableArray *arryM = [NSMutableArray array];
        for(NSDictionary *dict in dicArray){
            CZApp *app = [CZApp appWithDict:dict];
            [arryM addObject:app];
        }
        _appList = arryM;
    }
    return _appList;
}

-(NSOperationQueue *)opQueue
{
    if (_opQueue == nil) {
        _opQueue = [[NSOperationQueue alloc] init];
    }
    return _opQueue;
}

-(NSMutableDictionary *)operationCache
{
    if (_operationCache == nil) {
        _operationCache = [[NSMutableDictionary alloc] init];
    }
    return _operationCache;
}

-(NSMutableDictionary *)imageCache
{
    if (_imageCache == nil) {
        _imageCache = [[NSMutableDictionary alloc] init];
    }
    return _imageCache;
}

#pragma mark - 实现数据源方法
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.appList.count;
}

/**
 问题1：如果网速比较慢，会很卡
 解决方法：使用异步下载
 
 问题2：图片没有Frame，所有cell初始化的时候，给imageView的frame是0。异步下载完之后不显示  解决办法：使用占位图（如果展位图比较大, 自定义cell可以解决）
 
 问题3：如果图片下载速度不一致，同时用户快速滚动的时候，会因为Cell的重用导致图片混乱
 解决方法：MVC，使用Model（模型）保存下载的图像，再次刷新表格。
 
 问题4：在用户快速滚动的时候，会重复添加下载任务到下载队列。
 解决方法：建立下载操作的缓冲池。首先检查缓冲池里是否有当前图片的下载操作。有的话就不创建下载操作。从而保证一张图片只添加一个下载操作。其实就是建立一个全局的字典属性。
 
 问题5： 将图片保存到模型里的优缺点
 优点：不用重复下载，利用MVC刷新表格，不会造成数据混乱，加载速度比较快
 缺点：内存，所有下载好的图像都会记录在模型里。如果数据比较多（2000）个就会造成内存警告。
 
 -***图像根模型耦合性太强。导致清理内存非常困难
 解决办法：模型跟图像分开。在控制器里做缓存。
 问题6：下载操作缓冲池会越来越大。需要及时清理。
 
 */
/**
 代码重构：1.如果代码太长。
 目的：
 - 写的时候，如果思路清楚，能够一次性写完，但是也要注意同构。
 - 时间长了，不好阅读
 - 重构代码，便于维护
 
 重构方法：
 如果有一部分代码专门解决某一问题，就封装起来。
 1. 新建一个方法—> 剪切代码。
 2. 传参数。
 3. 在原来剪切代码的地方，调用抽取的方法。
 4. 注意，测试。
 5. 注意if嵌套，在实际的开发，非常忌讳很深的嵌套。
 */
// cell里面的imageView子控件是懒加载
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"AppCell";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:ID];
    // 给Cell设置数据
    CZApp *app = self.appList[indexPath.row];
    cell.textLabel.text = app.name;
    cell.detailTextLabel.text = app.download;
    
    // 判断模型里面是否有图像
    if ([self.imageCache objectForKey:app.icon]) {
        NSLog(@" 图片已经下载......");
        cell.imageView.image = self.imageCache[app.icon];
    }else{ // 如果模型内没有图片就异步下载
        
        // 显示图片—占位图
        cell.imageView.image = [UIImage imageNamed:@"user_default"];
#warning 从这里开始剪切的代码
        // 下载图片
        [self downloadImage:indexPath];
    }
    return cell;
}

-(void)downloadImage:(NSIndexPath *)indexPath
{
    CZApp *app = self.appList[indexPath.row];
    /**
     如果下载缓冲池里面有当前图片的下载操作，就不用创建下载操作，没有才创建
     缓冲池字典中 key:存放当前图片的url，字符串类型。
     Value：保存下载操作
     */
    if (self.operationCache[app.icon]) {
        NSLog(@"正在玩命下载中......");
        return;
    }
    // 缓冲池没有下载操作
    
    // 异步下载图片
    NSBlockOperation  *downLoadOp = [NSBlockOperation blockOperationWithBlock:^{
        // 模拟延时
        [NSThread sleepForTimeInterval:2];
        NSLog(@"正在下载中......");
        
        //  1. 下载图片（二进制数据）
        NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
        UIImage *image = [UIImage imageWithData:data];
        
        //  2. 将下载的数据保存到模型
        // 字典的赋值不能为nil,赋值为nil会崩溃
        if (image) {
            [self.imageCache setObject:image forKey:app.icon];
            
            // 3 将操作从缓冲池删除——将下载好的图片操作从缓冲池中移除
            [self.operationCache removeObjectForKey:app.icon];
        }
        
        //  4. 在主线程更新UI
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
            [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
            /** reload 会重新调用cell的初始化方法, 会重新判断模型里面是否有图像
             有的话就直接显示
             */
        }];
    }];
    
    // 将操作添加到队列
    [self.opQueue addOperation:downLoadOp];
    NSLog(@"操作的数量------------->%ld", self.opQueue.operationCount);
    
    // 将操作添加到缓冲池中(使用图片的url作为key)
    [self.operationCache setObject:downLoadOp forKey:app.icon];
}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{   // 点击后查看操作缓冲池内的操作详情
    NSLog(@"%@", self.operationCache);
}

/**
 在真实开发中，一定要注意这个方法
 */
-(void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    
    // 需要在这里做一些内存清理的工作，如果不处理会被系统强制闪退
    // 清理内存
    [self.imageCache  removeAllObjects];
    
    // 清理操作的缓存
    [self.operationCache removeAllObjects];
    
    // 取消下载队列内的任务
    [self.opQueue cancelAllOperations];
}
@end</span>

没有添加删除操作缓冲池下载任务之前，下载完成后，点击Cell 效果如下：

发现任务和总数相同。为操作缓冲池进行下载完成后的删除对应图片下载操作的处理后。运行结果如下：