tableView异步下载图片/SDWebImage图片缓存原理

问题说明：假设tableView的每个cell上的imageView的image都是从网络上获取的数据。如何解决图片延迟加载（显示很慢）、程序卡顿、图片错误显示、图片跳动的问题。

需要解决的问题：

1.程序运行过程中，每次滚动tableView让新的cell进入视野的时候，都要从网络获取image，浪费了大量的用户流量，严重影响了手机性能和流畅度。

2.每次程序启动 ，都要再次从网络上获取image，浪费了大量的用户流量，严重影响了的手机性能和流畅度。

3.快速拖动tableView，会出现程序卡顿、无反应的现象（主线程阻塞），导致人机交互延迟，严重影响了用户体验。

4.快速拖动tableView，会出现图片显示错位、图片跳动的现象，严重影响用户体验。

5.快速拖动tableView，会出现程序占用内存飙升，程序不流畅的现象，严重影响用户体验。

针对于以上问题，解决方案依次如下：

1、声明可变字典属性,把下载好的图片放入这个可变字典属性（以下简称“图片内存缓存”或“内存缓存”或“缓存”）,以图片的下载地址作为key来唯一标识区别其他图片。

2、获取本地cache目录（以下简称“本地缓存”或“本地”）,把下载好的图片存入本地缓存

3、开启子线程（新线程）,把下载图片这种耗时操作交给子线程来完成，图片下载完成后，跳回主线程更新UI，解决主线程中下载图片岛主主线程阻塞的问题

4、 多线程重复设置问题：多线程会存在这么一种情况：当cell的图片下载的时候，会开启一个新的子线程，由于多种原因（用户滑动的比较快、网速太差、图片太 大）。假如，下载当前cell的这一张图片需要十分钟，用户滚动tableView的时候，cell的图片还没下载完cell就被回收到 tableView的缓存池中，而此时被回收的cell的图片仍然在子线程中努力的下载中。当缓存池中的这个cell被重用的时候（此时cell的图片还 没下载完成），系统又会开启一个新的线程给这个cell下载对应的新图片（无论cell被重用到原来的位置还是新的位置，只要缓存或者本地没有对应的图片 都会再开启一个新的线程去下载），当第一个图片下载完后会显示到cell上（此时导致了图片的错误显示），当第二个图片下载完也会显示到cell上（此时 导致图片的快速跳动）
解决方案：更新UI的时候只刷新指定行[self.tableView
reloadRowsAtIndexPaths:@[indexPath]
withRowAnimation:UITableViewRowAnimationNone];不要使用cell.imageView.image =
image;

5、多线程重复下载问题：和重复设置问题类似，多线程会存在这么一种情况，当cell的图片下载的时候，会开启一个新的子线
程，由于多种原因（用户滑动的比较快、网速太差、图片太大）。假如，下载当前cell的这一张图片需要十分钟，用户滚动tableView的时
候，cell的图片还没下载完cell就被回收到tableView的缓存池中，而此时被回收的cell的图片仍然在子线程中努力的下载中。此时用户又回
滚tableView，缓存池中的cell又被重用到原来的位置，而此时无论是缓存中还是本地都没有这个cell对应的图片，所以系统又会开启一个新的线
程下载这个cell对应的图片。所以，这样一来就导致同一个cell的图片有两个线程在下载。如果用户抽风，不断的上下滚动tableView，导致同一
个cell不但的在缓存池和tableView之间切换（也就是系统不断的回收同一个cell到缓存池，然后又重用缓存池中的这个cell到cell原来
的位置（cell被回收之前在tableView上的位置））那么这种情况下，同一个cell的图片不止只是有两个子线程在下载，可能会有更多个子线程在
同事下载同一张图片，这样开辟了多个不必要的子线程，极大地浪费了用户手机的内存。
解决方案：增加NSMutableDictionary类型的
成员变量，开启NSOperation缓存，把每个正在执行的操作添加到字典，以图片的下载地址作为key来唯一标识其他NSOperation。每次开
启新线程下载图片之前，先判断字典中是否已经存在该key对应的操作，如果不存在，则开启子线程进行下载，否则什么都不做。

另外，需要注意的是，操作完成或失败，需要在字典中移除该操作，如果下载操作失败但没有从字典中移除，那么下次检测到字典中有这个key对应的操作，就永远不会开启新线程。

还
要考虑因为网络或者服务器宕机等其他不可控原因造成的下载数据data为nil的情况。这种情况下,需要判断data是否为nil,如果为nil,则直接
return，不需要再执行后面的代码。否则造成的后果是：data生成的image是空，把空的image赋值给图片缓存（字典），系统报错：
reason:
'*** setObjectForKey: object cannot be nil (key:
http://p0.qhimg.com/t01ad71850a5fae7e97.png)'。PS:后面（）中的key为调试时候系统打印的，因为这
里我把image的下载地址作为了key。根据每个人自己程序中字典key的具体情况key的打印信息会存在差异。

本例采用MVC模式，需要根据plist的存储结构来构建数据模型，以下为程序用到的所有文件 以及 plist文件的存储结构：

根据plist文件的存储结构构建数据模型：

数据模型的.h文件：

#import <Foundation/Foundation.h>

@interface WSAppItem : NSObject

@property (nonatomic,copy) NSString *name;
@property (nonatomic,copy) NSString *download;
@property (nonatomic,copy) NSString *icon;

- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)itemWithDict:(NSDictionary *)dict;

@end

数据模型的.m文件：

#import "WSAppItem.h"

@implementation WSAppItem

- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+ (instancetype)itemWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@end

NSString的分类的.h文件：

#import <Foundation/Foundation.h>

@interface NSString (WS)
/** 用于生成文件在caches目录中的路径 */
- (instancetype)cacheDir;
/** 用于生成文件在document目录中的路径 */
- (instancetype)docDir;
/** 用于生成文件在tmp目录中的路径 */
- (instancetype)tmpDir;
@end

NSString的分类的.m文件：

本程序中，以下方法只用到了cacheDir

#import "NSString+WS.h"

@implementation NSString (WS)

- (instancetype)cacheDir
{
    // 获取cache（本地缓存）目录
    NSString *path = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
    NSLog(@"%@",path);
    // 拼接绝对路径
    return [path stringByAppendingPathComponent:[self lastPathComponent]];
}

- (instancetype)docDir
{
    NSString *path = [NSSearchPathForDirectoriesInDomains(NSDocumentationDirectory, NSUserDomainMask, YES) lastObject];
    return [path stringByAppendingString:[self lastPathComponent]];
}

- (instancetype)tmpDir
{
    NSString *path = NSTemporaryDirectory(); // 临时文件夹
    return [path stringByAppendingString:[self lastPathComponent]];
}
@end

控制器.m文件：

#import "ViewController.h"
#import "WSAppItem.h"
#import "NSString+WS.h"

@interface ViewController ()
/** 模型数组 */
@property(nonatomic,strong) NSArray *apps;
/** 图片缓存 */
@property(nonatomic,strong) NSMutableDictionary *imageCaches;
/** 操作缓存 */
@property(nonatomic,strong) NSMutableDictionary *operations;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置storyBoard中的cell的高度：
    // 1.需要拖动cell来设置cell的高度，不能通过尺寸检查器中的rowHeight设置
    // 2.通过代码设置
    // 3.通过代理设置
}

#pragma mark - 懒加载
- (NSArray *)apps
{
    if (_apps == nil) {
        _apps = [NSArray array];
        // 加载plist->数组
        NSString *path = [[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil];
        NSArray *appsArr = [NSArray arrayWithContentsOfFile:path];

        NSMutableArray *arrM = [NSMutableArray arrayWithCapacity:appsArr.count];
        for (NSDictionary *dict in appsArr) {
            WSAppItem *appItem = [WSAppItem itemWithDict:dict];
            [arrM addObject:appItem];
        }
        // 创建不可变副本
        _apps = [arrM copy];
    }
    return _apps;
}

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

- (NSMutableDictionary *)operations
{
    if (_operations == nil) {
        _operations = [NSMutableDictionary dictionary];
    }
    return _operations;
}
#pragma mark - 数据源
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.apps.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 加载storyBoard中的cell
    UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"app"];

    // 给cell设置数据
    WSAppItem *appItem = self.apps[indexPath.row];
    cell.textLabel.text =appItem.name;
    cell.detailTextLabel.text = appItem.download;
    // 设置占位图
    cell.imageView.image = [UIImage imageNamed:@"temp"];

    // 在block内部访问外面的对象，外面的对象必须要用__block修饰
    __block UIImage *image = self.imageCaches[appItem.icon];
    // 1.1、如果缓存中的图片为空,判断本地是否为空
    if (image == nil) {

        // 拼接image在本地存储的路径
        NSString *iconPath  = [appItem.icon cacheDir];

        // 获取image的存储在本地的二进制数据
        NSData *data = [NSData dataWithContentsOfFile:iconPath];

        // 2.1、如果本地存储的图片为空,则再判断operation缓存中是否已经开启了对应的操作
        if (data == nil) {
            // 3.0、获取operation中对应的操作
            NSOperation *op = self.operations[appItem.icon];
            // 3.1、如果在operation缓存中获取的op为空，则开启新线程下载
            if (op == nil) {
                // 创建队列
                NSOperationQueue *queue = [[NSOperationQueue alloc] init];
                // 开启子线程下载图片
                NSBlockOperation *operation = [NSBlockOperation blockOperationWithBlock:^{
                    NSLog(@"下载的 图片");
                    // 把路径转换为URL->二进制数据
                    NSURL *url = [NSURL URLWithString:appItem.icon];
                    NSData *data = [NSData dataWithContentsOfURL:url];
                    // 如果下载失败或者data为空,则也要把操作从操作缓存中移除
                    if (data == nil) {
                        [self.operations removeObjectForKey:appItem.icon];
                        return;
                    }
                    NSLog(@"如果data为nil不能执行到这");
                    // 根据data获取图片
                    image = [UIImage imageWithData:data];

                    // 把下载好的图片放入缓存中
                    self.imageCaches[appItem.icon] = image;

                    // 把下载好的图片写入本地
                    [data writeToFile:iconPath atomically:YES];

                    // 回到主线程更新UI
                    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
//                    cell.imageView.image = image;
                        // 刷新指定行，避免重复设置
                        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];

                        // 下载成功，把操作从操作缓存移除
                        [self.operations removeObjectForKey:appItem.icon];
                    }];

                }];

                // 把操作添加到操作缓存
                self.operations[appItem.icon] = operation;

                // 把操作添加到队列
                [queue addOperation:operation];
            }else{
            // 3.2、如果operatin缓存中有对应的操作，那么什么都不做
            }

        }else{
            NSLog(@"本地的 图片");
            // 2.2、如果本地不为空,则加载本地图片
            image = [UIImage imageWithData:data];

            // 将本地图片缓存到缓存中，以后就直接从缓存中取
　　　　　　　// 注意：如果不添加到缓存中，那么每次程序启动都是从本地读取而非动缓存读取图片
　　　　　　　　 self.imageCaches[appItem.icon] = image;
            // 更新UI
            cell.imageView.image = image;
        }

    }else{
        NSLog(@"缓存的 图片");
        // 1.2、如果缓存中的图片不为空,就加载缓存中的图片
        image = self.imageCaches[appItem.icon];

        // 更新UI
        cell.imageView.image = image;
    }

    return cell;
}

@end

注意：为什么"重启程序"后显示读取的是本地图片，不是应该先本地后缓存吗？？？
 因为，受if语句嵌套的影响，外层if...else语句是判断缓存中有没有图片，内层if...else语句是判断本地有没有图片。所以，每次程序启动加载图片的顺序是，先判断缓存中有没有，再判断本地有没有；显然程序启动后，缓存中没有，那么就会去本地中查找，如果本地中也没有就会开启子线程下载图片,然后跳回主线程显示图片（也就是执行内层if语句）；如果本地查找有相应图片的话，那么就会加载本地的图片（也就是执行内层if语句的else语句）,所以这种情况下，永远不会加载缓存中的图片（也就是永远不会执行外层if语句的else语句）。解决这种问题的方式，可以在加载本地图片的时候，把本地图片添加到缓存当再次显示图片的时候，缓存不为空，所以就会加载缓存的图片，这样直接和缓存交互，速度和效率会更快一些。

self.imageCaches[appItem.icon] = image;

为什么有时候程序启动没有图片？设置占位图的作用？

1.如果程序第一次启动，那么肯定会开启子线程下载图片，如果不设置占位图，主线程执行完成，子线程图片没有下载完成，这种情况下，图片下载完成后因为没有刷新表格所以不会显示图片。

2.如果在没有联网的情况下第一次启动程序，没有设置占位图，程序会崩溃。（事实证明这句话是错误的，程序崩溃是因为data为空，根据data生成的image也是空，空对象赋值给字典自然会崩溃）

3.如果程序不是第一次启动，则不会开启子线程，直接加载缓存或者本地图片。

cell.imageView.image = [UIImage imageNamed:@"temp"];

总结：

预先准备：
 1>、声明可变字典属性,把下载好的图片放入缓存(字典)
 2>、声明可变字典属性，把正在执行的操作放入operation缓存（字典）

1.1、加载图片的时候，先判断内存缓存中有没有对应的图片。如果没有，则再判断本地缓存是否有对应图片
 2.1、如果本地缓存中没有对应图片，则再判断operation缓存中有没有对应的操作（有对应的操作说明该图片正在下载中，不需要再次开启新线程下载）

3.1、如果operation缓存中也没有对应操作，则真正开启子线程下载图片

注意：操作加入队列之前，把操作添加到operation缓存，操作完成或者失败，把操作从operation缓存移除

3.2、如果operation缓存中有对应的操作，则什么都不做
 2.2、如果本地有对应图片则获取本地图片
 1.2、如果内存缓存中有对应的图片，则加载缓存中的图片
 
 这样可以保证程序再次启动后,不会去下载图片,除非本地没有可用的图片
 面试主要针对以下几个方面回答：

1.重复下载  ： 图片内存缓存和磁盘缓存

2.主线程阻塞  ：  开启子线程

3.重复下载  ：  增加NSOperation字典

4.重复设置  ：  刷新指定行

5.下载失败或无网络  ：  判断data是否为nil

版权说明：此博客由博主本人编写而成，转载请注明出处，如有不正确或者有待改进之处还请指正，谢谢！