列表图片的下载方案演变
方案1：同步下载
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
cell.iconView.image = [UIImage imageWithData:data];
缺点：1、主线程上执行耗时操作，阻塞主线程，当网络不佳时会非常卡顿，严重影响用户体验；2、重复下载；
方案2：异步下载
// 设置占位图片
cell.iconView.image = [UIImage imageNamed:@"user_default"];
// 下载图片
[self.queue addOperationWithBlock:^{
// 子线程下载图片
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
// 主线程更新UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
cell.iconView.image = [UIImage imageWithData:data];
}];
}];
实现：1、设置占位图片；2、子线程下载图片，主线程更新UI；
优点：子线程执行耗时操作，避免阻塞主线程；
缺点：还是存在重复下载的问题；
方案3：MVC解决重复下载问题
if (app.image) { // 模型中有图片
cell.iconView.image = app.image;
} else { // 模型中没有图片
// 设置占位图片
cell.iconView.image = [UIImage imageNamed:@"user_default"];
// 下载图片
[self.queue addOperationWithBlock:^{
// 子线程下载图片
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
app.image = [UIImage imageWithData:data];
// 主线程更新UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}];
}];
}
实现：1、在方案2的基础上，为模型增加一个属性，用于保存下载好的图片；2、每次展示cell时，先判断模型中有没有图片，有就直接拿来用，没有再下载；3、子线程下载图片，并添加图片到模型，主线程局部刷新更新UI；
方案4：缓存池解决重复添加操作问题
if (app.image) { // 模型中有图片
cell.iconView.image = app.image;
} else { // 模型中没有图片
// 设置占位图片
cell.iconView.image = [UIImage imageNamed:@"user_default"];
// 下载图片
if (self.operationCache[app.icon]) { // 有下载操作
NSLog(@"正在下载...");
} else { // 没有下载操作
// 创建下载操作
NSBlockOperation *downloadOperation = [NSBlockOperation blockOperationWithBlock:^{
[NSThread sleepForTimeInterval:3.0];
// 子线程下载图片
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
app.image = [UIImage imageWithData:data];
// 主线程更新UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}];
// 移除下载操作
[self.operationCache removeObjectForKey:app.icon];
}];
// 添加下载操作到队列
[self.queue addOperation:downloadOperation];
// 添加下载操作到操作缓存
[self.operationCache setObject:downloadOperation forKey:app.icon];
}
}
实现：1、在方案3的基础上，创建一个操作缓存，用于存放下载操作；2、每次展示cell时，先判断模型中有没有图片，有就直接拿来用，没有再下载；3、下载时，先判断操作缓存中有没有下载操作，没有再创建；4、创建下载操作，并添加下载操作到队列和操作缓存中；
优点：避免了重复下载，利用MVC刷新表格即可；
缺点：1、如果图片数量足够多，会很占内存，容易造成内存警告，甚至是闪退；2、图片和模型强耦合，不利于清理内存；
方案5：内存缓存
if (self.imageCache[app.icon]) { // 内存中有图片
cell.iconView.image = self.imageCache[app.icon];
} else { // 内存中没有图片
// 设置占位图片
cell.iconView.image = [UIImage imageNamed:@"user_default"];
// 下载图片
if (self.operationCache[app.icon]) { // 有下载操作
NSLog(@"正在下载...");
} else { // 没有下载操作
// 创建下载操作
NSBlockOperation *downloadOperation = [NSBlockOperation blockOperationWithBlock:^{
[NSThread sleepForTimeInterval:3.0];
// 子线程下载图片
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
UIImage *image = [UIImage imageWithData:data];
// 添加图片到图片缓存
[self.imageCache setObject:image forKey:app.icon];
// 主线程更新UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}];
// 移除下载操作
[self.operationCache removeObjectForKey:app.icon];
}];
// 添加下载操作到队列
[self.queue addOperation:downloadOperation];
// 添加下载操作到操作缓存
[self.operationCache setObject:downloadOperation forKey:app.icon];
}
}
-
(void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];// 取消下载操作
[self.queue cancelAllOperations];
// 清空缓存
[self.operationCache removeAllObjects];
[self.imageCache removeAllObjects];
}
实现：1、在方案4的基础上，将图片从模型中分离出来，由模型存储改为内存缓存；2、每次展示cell时，先判断内存中有没有图片，有就直接拿来用，没有再下载；3、下载时，先判断操作缓存中有没有下载操作，没有再创建；4、创建下载操作，并添加下载操作到队列和操作缓存中；
优点：即使收到内存警告，清理起来也会很方便；
方案6：内存沙盒双缓存
if (self.imageCache[app.icon]) { // 内存中有图片
cell.iconView.image = self.imageCache[app.icon];
} else { // 内存中没有图片
UIImage *image = [UIImage imageWithContentsOfFile:[self cachesPathWithUrlString:app.icon]];
if (image) { // 沙盒中有图片
cell.iconView.image = image;
// 缓存图片到内存中（内存的读取速度比磁盘快）
[self.imageCache setObject:image forKey:app.icon];
} else { // 沙盒中没有图片
// 设置占位图片
cell.iconView.image = [UIImage imageNamed:@"user_default"];
// 下载图片
if (self.operationCache[app.icon]) { // 有下载操作
NSLog(@"正在下载...");
} else { // 没有下载操作
// 创建下载操作
NSBlockOperation *downloadOperation = [NSBlockOperation blockOperationWithBlock:^{
[NSThread sleepForTimeInterval:3.0];
// 子线程下载图片
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
// 添加图片到图片缓存
[self.imageCache setObject:[UIImage imageWithData:data] forKey:app.icon];
// 添加图片到沙盒
[data writeToFile:[self cachesPathWithUrlString:app.icon] atomically:YES];
// 主线程更新UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}];
// 移除下载操作
[self.operationCache removeObjectForKey:app.icon];
}];
// 添加下载操作到队列
[self.queue addOperation:downloadOperation];
// 添加下载操作到操作缓存
[self.operationCache setObject:downloadOperation forKey:app.icon];
}
}
}
-
(NSString *)cachesPathWithUrlString:(NSString *)urlString {
NSString *cachePath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];return [cachePath stringByAppendingPathComponent:urlString.lastPathComponent];
} -
(void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];// 取消下载操作
[self.queue cancelAllOperations];
// 清空缓存
[self.operationCache removeAllObjects];
[self.imageCache removeAllObjects];
}
