2018-12-08

列表图片的下载方案演变

屏幕快照 2018-12-08 下午6.26.28.png

方案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];
  }

实现：1、在方案5的基础上，由内存缓存改为内存沙盒双缓存；2、每次展示cell时，先判断内存中有没有图片，有就直接拿来用，没有再去沙盒中找；3、如果沙盒中有图片，直接拿来用，并缓存图片到内存中（内存的读取速度比磁盘快），没有再下载；4、下载时，先判断操作缓存中有没有下载操作，没有再创建；5、创建下载操作，并添加下载操作到队列和操作缓存中；

结语：1、之所以总结一下，是因为这个演变过程挺有意思；2、尽管说这么多，开发中还是直接用SDWebImage吧，很刚；