NSOPeration 之UItabView无沙盒缓存——UITabView下载图片后从操作缓冲池清除下载操作

「爱情、让人受尽委屈。」 2022-08-09 12:46 97阅读 0赞

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

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

问题回顾总结：

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

解决方法：使用异步下载

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

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

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

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

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

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

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

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

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

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

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

原理图如下所示：

![Center][]

思路剖析如下所示：

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

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

![Center 1][]

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

![Center 2][]

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

![Center 3][]

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

CZApp.h

//
 // 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

CZApp.m

//
 // 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

viewController.m

//
 // 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

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

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

![Center 5][]

最后发现下载缓冲池中的下载操作为空。当数据量很大时，清理下载操作缓冲池也显得格外重要。

[Center]: /images/20220731/241e8fd1b58543e8a94409619c5df180.png
[Center 1]: /images/20220731/da860134c84c4e8badb23046a7721177.png
[Center 2]: /images/20220731/67019e42dd0f4e5b9bd2981982c86991.png
[Center 3]: /images/20220731/5cb81e994c2a44ef9369eb9e3bfbb6d3.png
[Center 4]: /images/20220731/e43d10265a464431905e5ecb34cc8806.png
[Center 5]: /images/20220731/09a4d8115b9c44ed89edc01dec2e68be.png