iOS 开发iOS 面试IOS

SDWebImage框架底层讲解

2016-03-10  本文已影响1902人  si1ence

本文通过模拟SDWebImage基本功能实现,从而帮助读者理解SDWebImage的底层实现机制

一张图讲清楚二级缓存!

首先看一下官方的架构图:

SDWebImageSequenceDiagram.png SDWebImageClassDiagram.png

一. 异步加载图片

1.搭建界面&数据准备

@interface AppInfo : NSObject
///  App 名称
@property (nonatomic, copy) NSString *name;
///  图标 URL
@property (nonatomic, copy) NSString *icon;
///  下载数量
@property (nonatomic, copy) NSString *download;

+ (instancetype)appInfoWithDict:(NSDictionary *)dict;
///  从 Plist 加载 AppInfo
+ (NSArray *)appList;

@end
+ (instancetype)appInfoWithDict:(NSDictionary *)dict {
    id obj = [[self alloc] init];

    [obj setValuesForKeysWithDictionary:dict];

    return obj;
}

///  从 Plist 加载 AppInfo
+ (NSArray *)appList {

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"apps.plist" withExtension:nil];
    NSArray *array = [NSArray arrayWithContentsOfURL:url];

    NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:array.count];

    [array enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        [arrayM addObject:[self appInfoWithDict:obj]];
    }];

    return arrayM.copy;
}
///  应用程序列表
@property (nonatomic, strong) NSArray *appList;
- (NSArray *)appList {
    if (_appList == nil) {
        _appList = [AppInfo appList];
    }
    return _appList;
}
#pragma mark - 数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return self.appList.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"AppCell"];

    // 设置 Cell...
    AppInfo *app = self.appList[indexPath.row];

    cell.textLabel.text = app.name;
    cell.detailTextLabel.text = app.download;

    return cell;
}

知识点

  1. 数据模型应该负责所有数据准备工作,在需要时被调用
  2. 数据模型不需要关心被谁调用
  3. 数组使用
    • [NSMutableArray arrayWithCapacity:array.count]; 的效率更高
    • 使用块代码遍历的效率比 for 要快
  4. @"AppCell" 格式定义的字符串是保存在常量区的
  5. 在 OC 中,懒加载是无处不在的
    • 设置 cell 内容时如果没有指定图像,则不会创建 imageView

2.同步加载图像

// 同步加载图像
// 1. 模拟延时
NSLog(@"正在下载 %@", app.name);
[NSThread sleepForTimeInterval:0.5];

// 2. 同步加载网络图片
NSURL *url = [NSURL URLWithString:app.icon];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:data];

cell.imageView.image = image;

注意:之前没有设置 imageView 时,imageView 并不会被创建

解决办法--->异步下载图像

3.异步下载图像

///  全局队列,统一管理所有下载操作
@property (nonatomic, strong) NSOperationQueue *downloadQueue;
- (NSOperationQueue *)downloadQueue {
    if (_downloadQueue == nil) {
        _downloadQueue = [[NSOperationQueue alloc] init];
    }
    return _downloadQueue;
}
// 异步加载图像
// 1. 定义下载操作
// 异步加载图像
NSBlockOperation *downloadOp = [NSBlockOperation blockOperationWithBlock:^{
    // 1. 模拟延时
    NSLog(@"正在下载 %@", app.name);
    [NSThread sleepForTimeInterval:0.5];

    // 2. 异步加载网络图片
    NSURL *url = [NSURL URLWithString:app.icon];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];

    // 3. 主线程更新 UI
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        cell.imageView.image = image;
    }];
}];

// 2. 将下载操作添加到队列
[self.downloadQueue addOperation:downloadOp];

运行测试,存在的问题--->下载完成后不显示图片

原因分析:

解决办法--->使用占位图像 or 自定义 Cell

注意演示不在主线程更新图像的效果

4.占位图像

// 占位图像
UIImage *placeholder = [UIImage imageNamed:@"user_default"];
cell.imageView.image = placeholder;

解决办法--->自定义 Cell

自定义 Cell
cell.nameLabel.text = app.name;
cell.downloadLabel.text = app.download;

// 异步加载图像
// 0. 占位图像
UIImage *placeholder = [UIImage imageNamed:@"user_default"];
cell.iconView.image = placeholder;

// 1. 定义下载操作
NSBlockOperation *downloadOp = [NSBlockOperation blockOperationWithBlock:^{
    // 1. 模拟延时
    NSLog(@"正在下载 %@", app.name);
    [NSThread sleepForTimeInterval:0.5];
    // 2. 异步加载网络图片
    NSURL *url = [NSURL URLWithString:app.icon];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];

    // 3. 主线程更新 UI
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        cell.iconView.image = image;
    }];
}];

// 2. 将下载操作添加到队列
[self.downloadQueue addOperation:downloadOp];
// 1. 模拟延时
if (indexPath.row > 9) {
    [NSThread sleepForTimeInterval:3.0];
}

上下滚动一下表格即可看到 cell 复用的错误

解决办法---> MVC

5.MVC

#import <UIKit/UIKit.h>

///  下载的图像
@property (nonatomic, strong) UIImage *image;
使用 MVC 更新表格图像
if (app.image != nil) {
    NSLog(@"加载模型图像...");
    cell.iconView.image = app.image;
    return cell;
}
// 3. 主线程更新 UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
    // 设置模型中的图像
    app.image = image;
    // 刷新表格
    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}];
// 模拟延时
if (indexPath.row == 0) {
    [NSThread sleepForTimeInterval:10.0];
}

快速滚动表格,将第一行不断“滚出/滚入”界面可以查看操作被重复创建的问题

解决办法 ---> 操作缓冲池

6.操作缓冲池

所谓缓冲池,其实就是一个容器,能够存放多个对象

小结:选择字典作为操作缓冲池

缓冲池属性
///  操作缓冲池
@property (nonatomic, strong) NSMutableDictionary *operationCache;
- (NSMutableDictionary *)operationCache {
    if (_operationCache == nil) {
        _operationCache = [NSMutableDictionary dictionary];
    }
    return _operationCache;
}
修改代码
// 异步加载图像
// 0. 占位图像
UIImage *placeholder = [UIImage imageNamed:@"user_default"];
cell.iconView.image = placeholder;

// 判断操作是否存在
if (self.operationCache[app.icon] != nil) {
    NSLog(@"正在玩命下载中...");
    return cell;
}
// 2. 将操作添加到操作缓冲池
[self.operationCache setObject:downloadOp forKey:app.icon];

// 3. 将下载操作添加到队列
[self.downloadQueue addOperation:downloadOp];

修改占位图像的代码位置,观察会出现的问题

[self.operationCache removeObjectForKey:app.icon];
循环引用分析!
__weak typeof(self) weakSelf = self;
- (void)dealloc {
    NSLog(@"我给你最后的疼爱是手放开");
}

8.代码重构

重构目的
重构的步骤

重构一定要小步走,要边改变测试

重构后的代码
- (void)downloadImage:(NSIndexPath *)indexPath {

    // 1. 根据 indexPath 获取数据模型
    AppInfo *app = self.appList[indexPath.row];

    // 2. 判断操作是否存在
    if (self.operationCache[app.icon] != nil) {
        NSLog(@"正在玩命下载中...");
        return;
    }

    // 3. 定义下载操作
    __weak typeof(self) weakSelf = self;
    NSBlockOperation *downloadOp = [NSBlockOperation blockOperationWithBlock:^{
        // 1. 模拟延时
        NSLog(@"正在下载 %@", app.name);
        if (indexPath.row == 0) {
            [NSThread sleepForTimeInterval:3.0];
        }
        // 2. 异步加载网络图片
        NSURL *url = [NSURL URLWithString:app.icon];
        NSData *data = [NSData dataWithContentsOfURL:url];
        UIImage *image = [UIImage imageWithData:data];

        // 3. 主线程更新 UI
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
            // 将下载操作从缓冲池中删除
            [weakSelf.operationCache removeObjectForKey:app.icon];

            if (image != nil) {
                // 设置模型中的图像
                [weakSelf.imageCache setObject:image forKey:app.icon];
                // 刷新表格
                [weakSelf.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
            }
        }];
    }];

    // 4. 将操作添加到操作缓冲池
    [self.operationCache setObject:downloadOp forKey:app.icon];

    // 5. 将下载操作添加到队列
    [self.downloadQueue addOperation:downloadOp];
}

9.内存警告

如果接收到内存警告,程序一定要做处理,否则后果很严重!!!

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

    // 1. 取消下载操作
    [self.downloadQueue cancelAllOperations];

    // 2. 清空缓冲池
    [self.operationCache removeAllObjects];
    [self.imageCache removeAllObjects];
}

10.沙盒缓存实现

沙盒目录介绍
NSString+Path
#import "NSString+Path.h"

@implementation NSString (Path)

- (NSString *)appendDocumentPath {
    NSString *dir = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES).lastObject;
    return [dir stringByAppendingPathComponent:self.lastPathComponent];
}

- (NSString *)appendCachePath {
    NSString *dir = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES).lastObject;
    return [dir stringByAppendingPathComponent:self.lastPathComponent];
}

- (NSString *)appendTempPath {
    return [NSTemporaryDirectory() stringByAppendingPathComponent:self.lastPathComponent];
}

@end
沙盒缓存
if (data != nil) {
    [data writeToFile:app.icon.appendCachePath atomically:true];
}
// 判断沙盒文件是否存在
UIImage *image = [UIImage imageWithContentsOfFile:app.icon.appendCachePath];
if (image != nil) {
    NSLog(@"从沙盒加载图像 ... %@", app.name);
    // 将图像添加至图像缓存
    [self.imageCache setObject:image forKey:app.icon];
    cell.iconView.image = image;

    return cell;
}

11.SDWebImage初体验

简介
演示 SDWebImage
#import "UIImageView+WebCache.h"
[cell.iconView sd_setImageWithURL:[NSURL URLWithString:app.icon]];
思考:SDWebImage 是如何实现的?

要实现这一目标,需要解决以下问题:

目标锁定:取消正在执行中的操作!

12.小结

代码实现回顾
遗留问题

二. 仿SDWebImage

1.下载操作实现

#import "NSString+Path.h"

@interface DownloadImageOperation()
/// 要下载图像的 URL 字符串
@property (nonatomic, copy) NSString *URLString;
/// 完成回调 Block
@property (nonatomic, copy) void (^finishedBlock)(UIImage *image);
@end

@implementation DownloadImageOperation

+ (instancetype)downloadImageOperationWithURLString:(NSString *)URLString finished:(void (^)(UIImage *))finished {
    DownloadImageOperation *op = [[DownloadImageOperation alloc] init];

    op.URLString = URLString;
    op.finishedBlock = finished;

    return op;
}

- (void)main {
    @autoreleasepool {

        // 1. NSURL
        NSURL *url = [NSURL URLWithString:self.URLString];
        // 2. 获取二进制数据
        NSData *data = [NSData dataWithContentsOfURL:url];
        // 3. 保存至沙盒
        if (data != nil) {
            [data writeToFile:self.URLString.appendCachePath atomically:YES];
        }

        if (self.isCancelled) {
            NSLog(@"下载操作被取消");
            return;
        }

        // 4. 主线程回调
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
            self.finishedBlock([UIImage imageWithData:data]);
        }];
    }
}

2.测试下载操作

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    int seed = arc4random_uniform((UInt32)self.appList.count);
    AppInfo *app = self.appList[seed];

    // 取消之前的下载操作
    if (![app.icon isEqualToString:self.currentURLString]) {
        // 取消之前操作
        [self.operationCache[self.currentURLString] cancel];
    }

    // 记录当前操作
    self.currentURLString = app.icon;

    // 创建下载操作
    DownloadImageOperation *op = [DownloadImageOperation downloadImageOperationWithURLString:app.icon finished:^(UIImage *image) {
        self.iconView.image = image;

        // 从缓冲池删除操作
        [self.operationCache removeObjectForKey:app.icon];
    }];

    // 将操作添加到缓冲池
    [self.operationCache setObject:op forKey:app.icon];
    // 将操作添加到队列
    [self.downloadQueue addOperation:op];
}
框架结构设计

3.下载管理器

+ (instancetype)sharedManager {
    static id instance;

    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        instance = [[self alloc] init];
    });
    return instance;
}

之所以设计成单例,是为了实现全局的图像下载管理

/// 下载队列
@property (nonatomic, strong) NSOperationQueue *downloadQueue;
/// 下载操作缓存
@property (nonatomic, strong) NSMutableDictionary *operationCache;

// MARK: - 懒加载
- (NSMutableDictionary *)operationCache {
    if (_operationCache == nil) {
        _operationCache = [NSMutableDictionary dictionary];
    }
    return _operationCache;
}

- (NSOperationQueue *)downloadQueue {
    if (_downloadQueue == nil) {
        _downloadQueue = [[NSOperationQueue alloc] init];
    }
    return _downloadQueue;
}
///  下载指定 URL 的图像
///
///  @param URLString 图像 URL 字符串
///  @param finished  下载完成回调
- (void)downloadImageOperationWithURLString:(NSString *)URLString finished:(void (^)(UIImage *image))finished;
- (void)downloadImageOperationWithURLString:(NSString *)URLString finished:(void (^)(UIImage *))finished {

    // 检查操作缓冲池
    if (self.operationCache[URLString] != nil) {
        NSLog(@"正在玩命下载中,稍安勿躁");
        return;
    }

    // 创建下载操作
    DownloadImageOperation *op = [DownloadImageOperation downloadImageOperationWithURLString:URLString finished:^(UIImage *image) {
        // 从缓冲池删除操作
        [self.operationCache removeObjectForKey:URLString];

        // 执行回调
        finished(image);
    }];

    // 将操作添加到缓冲池
    [self.operationCache setObject:op forKey:URLString];
    // 将操作添加到队列
    [self.downloadQueue addOperation:op];
}
修改 ViewController 中的代码
// 创建下载操作
[[DownloadImageManager sharedManager] downloadImageOperationWithURLString:self.currentURLString finished:^(UIImage *image) {
    self.iconView.image = image;
}];
///  取消指定 URL 的下载操作
- (void)cancelDownloadWithURLString:(NSString *)URLString {
    // 1. 从缓冲池中取出下载操作
    DownloadImageOperation *op = self.operationCache[URLString];

    if (op == nil) {
        return;
    }

    // 2. 如果有取消
    [op cancel];
    // 3. 从缓冲池中删除下载操作
    [self.operationCache removeObjectForKey:URLString];
}

运行测试!

缓存管理
/// 图像缓存
@property (nonatomic, strong) NSMutableDictionary *imageCache;
- (NSMutableDictionary *)imageCache {
    if (_imageCache == nil) {
        _imageCache = [NSMutableDictionary dictionary];
    }
    return _imageCache;
}
///  检查图像缓存
///
///  @return 是否存在图像缓存
- (BOOL)chechImageCache {
    return NO;
}
// 如果存在图像缓存,直接回调
if ([self chechImageCache]) {
    finished(self.imageCache[URLString]);
    return;
}
- (BOOL)chechImageCache:(NSString *)URLString {

    // 1. 如果存在内存缓存,直接返回
    if (self.imageCache[URLString]) {
        NSLog(@"内存缓存");
        return YES;
    }

    // 2. 如果存在磁盘缓存
    UIImage *image = [UIImage imageWithContentsOfFile:URLString.appendCachePath];
    if (image != nil) {
        // 2.1 加载图像并设置内存缓存
        NSLog(@"从沙盒缓存");
        [self.imageCache setObject:image forKey:URLString];
        // 2.2 返回
        return YES;
    }

    return NO;
}

运行测试

4.自定义 UIImageView

///  设置指定 URL 字符串的网络图像
///
///  @param URLString 网络图像 URL 字符串
- (void)setImageWithURLString:(NSString *)URLString;
@interface WebImageView()
///  当前正在下载的 URL 字符串
@property (nonatomic, copy) NSString *currentURLString;
@end

@implementation WebImageView

- (void)setImageWithURLString:(NSString *)URLString {

    // 取消之前的下载操作
    if (![URLString isEqualToString:self.currentURLString]) {
        // 取消之前操作
        [[DownloadImageManager sharedManager] cancelDownloadWithURLString:self.currentURLString];
    }

    // 记录当前操作
    self.currentURLString = URLString;

    // 创建下载操作
    __weak typeof(self) weakSelf = self;
    [[DownloadImageManager sharedManager] downloadImageOperationWithURLString:URLString finished:^(UIImage *image) {
        weakSelf.image = image;
    }];
}
@end
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    int seed = arc4random_uniform((UInt32)self.appList.count);
    AppInfo *app = self.appList[seed];

    [self.iconView setImageWithURLString:app.icon];
}
// MARK: - 运行时关联对象
const void *HMCurrentURLStringKey = "HMCurrentURLStringKey";

- (void)setCurrentURLString:(NSString *)currentURLString {
    objc_setAssociatedObject(self, HMCurrentURLStringKey, currentURLString, OBJC_ASSOCIATION_COPY_NONATOMIC);
}

- (NSString *)currentURLString {
    return objc_getAssociatedObject(self, HMCurrentURLStringKey);
}
self.image = nil;

三.关于NSCache缓存

介绍
方法
属性
代码演练
@property (nonatomic, strong) NSCache *cache;
- (NSCache *)cache {
    if (_cache == nil) {
        _cache = [[NSCache alloc] init];
        _cache.delegate = self;
        _cache.countLimit = 10;
    }
    return _cache;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    for (int i = 0; i < 20; ++i) {
        NSString *str = [NSString stringWithFormat:@"%d", i];
        NSLog(@"set -> %@", str);
        [self.cache setObject:str forKey:@(i)];
        NSLog(@"set -> %@ over", str);
    }

    // 遍历缓存
    NSLog(@"------");

    for (int i = 0; i < 20; ++i) {
        NSLog(@"%@", [self.cache objectForKey:@(i)]);
    }
}

// 代理方法,仅供观察使用,开发时不建议重写此方法
- (void)cache:(NSCache *)cache willEvictObject:(id)obj {
    NSLog(@"remove -> %@", obj);
}
修改网络图片框架
///  图像缓冲池
@property (nonatomic, strong) NSCache *imageCache;
- (NSCache *)imageCache {
    if (_imageCache == nil) {
        _imageCache = [[NSCache alloc] init];
        _imageCache.countLimit = 15;
    }
    return _imageCache;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    for (AppInfo *app in self.appList) {
        NSLog(@"%@ %@", [[DownloadImageManager sharedManager].imageCache objectForKey:app.icon], app.name);
    }
}
- (instancetype)init
{
    self = [super init];
    if (self) {
        // 注册通知
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(clearMemory) name:UIApplicationDidReceiveMemoryWarningNotification object:nil];
    }
    return self;
}

// 提示:虽然执行不到,但是写了也无所谓
- (void)dealloc {
    // 删除通知
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}
- (void)clearMemory {
    NSLog(@"%s", __FUNCTION__);

    // 取消所有下载操作
    [self.downloadQueue cancelAllOperations];

    // 删除缓冲池
    [self.operationChache removeAllObjects];
}

注意:内存警告或者超出限制后,缓存中的任何对象,都有可能被清理。

四.一些你应该知道的SDWebImage知识点

1> 图片文件缓存的时间有多长:1周

_maxCacheAge = kDefaultCacheMaxCacheAge

2> SDWebImage 的内存缓存是用什么实现的?

NSCache

3> SDWebImage 的最大并发数是多少?

maxConcurrentDownloads = 6

4> SDWebImage 支持动图吗?GIF

#import <ImageIO/ImageIO.h>
[UIImage animatedImageWithImages:images duration:duration];

5> SDWebImage是如何区分不同格式的图像的

6> SDWebImage 缓存图片的名称是怎么确定的!

7> SDWebImage 的内存警告是如何处理的!

上一篇下一篇

猜你喜欢

热点阅读