注意点及细节处理:
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
