SDWebImage总体结构
在平常的项目中，对于加载网络图片，我们少不了用到SDWebImage。
仅需要调用UIImage分类的一行代码(其余的加载图片分类方法实际最终也会调到该方法)：
- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock
SDWebImage会自动为我们完成加载cache，更新cache以及下载图片的功能，而且仅需要调用这一个接口。
SDWebImage是如何做到这些功能的呢？
源码面前无秘密，那就让我们一起来研究学习SDWebImage。
首先，上一张SDWebImage的总体结构图：
我们在使用SDWebImage时，会调用UIImageView的分类方法，而在分类方法里面，实际上会调用单例实例
SDWebImageManager，而对应每一个加载图片操作（这里所谓的加载，指读取缓存或下载图片，并更新缓存），都有一个SDWebImageCombinedOperation对象，注意这个对象类的名字中含有的‘Combined’，表明这个Operation，其实是读写缓存，下载文件多种操作的一个Combine。
在SDWebImageManager中，又包含两个只读属性
@property (strong, nonatomic, readonly) SDImageCache *imageCache;@property (strong, nonatomic, readonly) SDWebImageDownloader *imageDownloader;看名字就知道，imageCache负责Cache的读写及更新，而imageDownloader则负责网络下载图片。
而在SDWebImageDownloader中，每一个下载操作，又对应于一个SDWebImageDownloaderOperation对象。
从上的结构分析可以知道，对于每个操作，SDWebImage实际会抽象出一个operation对象，这样，就可以实现对于同时进行多个操作的一个管理，也就是对operation对象的管理。
一张图片是如何加载到UI的
看完上面SDWebImage的总体架构图，我们再结合实际代码，来看看一个网络图片，是如何下载到本地的。
下面是UIImageView (WebCache)加载图片的方法实现：
- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock {
// step1. 先关掉之前的下载
[self sd_cancelCurrentImageLoad];
// step2. 利用runtime, 存储当前下载的URL
objc_setAssociatedObject(self, &imageURLKey, url, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
if (!(options & SDWebImageDelayPlaceholder)) { // step3. 设置placeholder
dispatch_main_async_safe(^{ // dispatch_main_async_safe 宏 用于确保在mainqueue 上执行block
self.image = placeholder;
});
}
// step4. 进入图片 下载/读缓存 处理
if (url) {
// check if activityView is enabled or not
if ([self showActivityIndicatorView]) {
[self addActivityIndicator];
}
__weak __typeof(self)wself = self;
// step4.1 调用 SDWebImageManager 单例下载
id <SDWebImageOperation> operation = [SDWebImageManager.sharedManager downloadImageWithURL:url options:options progress:progressBlock completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
[wself removeActivityIndicator];
if (!wself) return; // 由于是block回调 这时weakself 可能已经释放，若释放，则return，不做任何回调处理
dispatch_main_sync_safe(^{
if (!wself) return;
if (image && (options & SDWebImageAvoidAutoSetImage) && completedBlock)
{
completedBlock(image, error, cacheType, url);
return;
}
else if (image) {
wself.image = image;
[wself setNeedsLayout];
} else {
if ((options & SDWebImageDelayPlaceholder)) {
wself.image = placeholder;
[wself setNeedsLayout];
}
}
if (completedBlock && finished) {
completedBlock(image, error, cacheType, url);
}
});
}];
// step4.2 保存 当前下载所对应的operation(目前operation仅支持cancel 接口)
[self sd_setImageLoadOperation:operation forKey:@"UIImageViewImageLoad"];
} else { // 如果图片url 为nil，则直接返回错误
dispatch_main_async_safe(^{
[self removeActivityIndicator];
if (completedBlock) {
NSError *error = [NSError errorWithDomain:SDWebImageErrorDomain code:-1 userInfo:@{NSLocalizedDescriptionKey : @"Trying to load a nil url"}];
completedBlock(nil, error, SDImageCacheTypeNone, url);
}
});
}
}
代码通过注释，也不难理解。SDWebImage加载图片，分为如下几个步骤：
- 先关闭之前的下载
- 将当前下载图片的url作为UIImageView的属性（利用runtime实现）
- 如果有placeholder，则直接设置当前image为placeholder
- 调用SDWebImageManager单实例的downloadImageWithURL方法，加载图片（这里说加载而不是下载，是因为最终图片来源可能是缓存），并返回一个id<SDWebImageOperation>对象（其实是一个SDWebImageCombinedOperation对象），代表当前的加载图片操作。
- 将id<SDWebImageOperation>对象保存，当需要取消加载时，仅需要调用id<SDWebImageOperation>协议方法cancel。
- 在SDWebImageManger的downloadImageWithURL方法的回调block中，如果加载image图片成功，则设置UIImageIView的image属性，并调用completedBlock，若失败，则在completedBlock中返回失败error。
以上就是通过SDWebImage加载图片的整个流程，到目前为止，流程很清楚。
我们可以发现，这里的核心逻辑，就在于调用了SDWebImageManger的downloadImageWithURL方法。那么，我们接下来看看SDWebImageManger的代码。
SDWebImageManager
先看SDWebImageManager的头文件：
/**
* The SDWebImageManager is the class behind the UIImageView+WebCache category and likes.
* It ties the asynchronous downloader (SDWebImageDownloader) with the image cache store (SDImageCache).
* You can use this class directly to benefit from web image downloading with caching in another context than
* a UIView.
*
* Here is a simple example of how to use SDWebImageManager:
*
* @code
SDWebImageManager *manager = [SDWebImageManager sharedManager];
[manager downloadImageWithURL:imageURL
options:0
progress:nil
completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
if (image) {
// do something with image
}
}];
* @endcode
*/
@interface SDWebImageManager : NSObject
@property (weak, nonatomic) id <SDWebImageManagerDelegate> delegate;
@property (strong, nonatomic, readonly) SDImageCache *imageCache;
@property (strong, nonatomic, readonly) SDWebImageDownloader *imageDownloader;
/**
* The cache filter is a block used each time SDWebImageManager need to convert an URL into a cache key. This can
* be used to remove dynamic part of an image URL.
*
* The following example sets a filter in the application delegate that will remove any query-string from the
* URL before to use it as a cache key:
*
* @code
[[SDWebImageManager sharedManager] setCacheKeyFilter:^(NSURL *url) {
url = [[NSURL alloc] initWithScheme:url.scheme host:url.host path:url.path];
return [url absoluteString];
}];
* @endcode
*/
@property (nonatomic, copy) SDWebImageCacheKeyFilterBlock cacheKeyFilter;
/**
* Returns global SDWebImageManager instance.
*
* @return SDWebImageManager shared instance
*/
+ (SDWebImageManager *)sharedManager;
/**
* Allows to specify instance of cache and image downloader used with image manager.
* @return new instance of `SDWebImageManager` with specified cache and downloader.
*/
- (instancetype)initWithCache:(SDImageCache *)cache downloader:(SDWebImageDownloader *)downloader;
/**
* Downloads the image at the given URL if not present in cache or return the cached version otherwise.
*
* @param url The URL to the image
* @param options A mask to specify options to use for this request
* @param progressBlock A block called while image is downloading
* @param completedBlock A block called when operation has been completed.
*
* This parameter is required.
*
* This block has no return value and takes the requested UIImage as first parameter.
* In case of error the image parameter is nil and the second parameter may contain an NSError.
*
* The third parameter is an `SDImageCacheType` enum indicating if the image was retrieved from the local cache
* or from the memory cache or from the network.
*
* The last parameter is set to NO when the SDWebImageProgressiveDownload option is used and the image is
* downloading. This block is thus called repeatedly with a partial image. When image is fully downloaded, the
* block is called a last time with the full image and the last parameter set to YES.
*
* @return Returns an NSObject conforming to SDWebImageOperation. Should be an instance of SDWebImageDownloaderOperation
*/
- (id <SDWebImageOperation>)downloadImageWithURL:(NSURL *)url
options:(SDWebImageOptions)options
progress:(SDWebImageDownloaderProgressBlock)progressBlock
completed:(SDWebImageCompletionWithFinishedBlock)completedBlock;
/**
* Saves image to cache for given URL
*
* @param image The image to cache
* @param url The URL to the image
*
*/
- (void)saveImageToCache:(UIImage *)image forURL:(NSURL *)url;
/**
* Cancel all current operations
*/
- (void)cancelAll;
/**
* Check one or more operations running
*/
- (BOOL)isRunning;
/**
* Check if image has already been cached
*
* @param url image url
*
* @return if the image was already cached
*/
- (BOOL)cachedImageExistsForURL:(NSURL *)url;
/**
* Check if image has already been cached on disk only
*
* @param url image url
*
* @return if the image was already cached (disk only)
*/
- (BOOL)diskImageExistsForURL:(NSURL *)url;
/**
* Async check if image has already been cached
*
* @param url image url
* @param completionBlock the block to be executed when the check is finished
*
* @note the completion block is always executed on the main queue
*/
- (void)cachedImageExistsForURL:(NSURL *)url
completion:(SDWebImageCheckCacheCompletionBlock)completionBlock;
/**
* Async check if image has already been cached on disk only
*
* @param url image url
* @param completionBlock the block to be executed when the check is finished
*
* @note the completion block is always executed on the main queue
*/
- (void)diskImageExistsForURL:(NSURL *)url
completion:(SDWebImageCheckCacheCompletionBlock)completionBlock;
/**
*Return the cache key for a given URL
*/
- (NSString *)cacheKeyForURL:(NSURL *)url;
@end
注释很多，其实真正的代码并不多。注意到开头的一段注释（结合自己理解简单翻译一下）：
SDWebImageManager为UIImageView+WebCache加载图片提供了核心实现。它其实是管理了图片异步的下载以及缓存处理，同时，我们可以直接使用SDWebImageManager来加载网络图片，而不仅仅是将其用于UIImageView中。所以，以后我们想下载网络图片，而不仅仅是为了做UI展示时，可以直接使用SDWebImageManager来下载图片以及缓存管理。
在这里，我们还是先关注图片是如何加载的，除掉其他无关的代码，SDWebImageManager可以简化为：
@interface SDWebImageManager : NSObject
@property (weak, nonatomic) id <SDWebImageManagerDelegate> delegate;
@property (strong, nonatomic, readonly) SDImageCache *imageCache; // 处理缓存相关
@property (strong, nonatomic, readonly) SDWebImageDownloader *imageDownloader; // 处理图片下载
@property (nonatomic, copy) SDWebImageCacheKeyFilterBlock cacheKeyFilter; // 用于过滤处理图片的url（这里可先不关注）
// 表明我是一个单例
+ (SDWebImageManager *)sharedManager;
- (instancetype)initWithCache:(SDImageCache *)cache downloader:(SDWebImageDownloader *)downloader;
// 核心加载图片方法 downloadImageWithURL
- (id <SDWebImageOperation>)downloadImageWithURL:(NSURL *)url
options:(SDWebImageOptions)options
progress:(SDWebImageDownloaderProgressBlock)progressBlock
completed:(SDWebImageCompletionWithFinishedBlock)completedBlock;
SDWebImageManager的利用downloadImageWithURL方法加载图片。我们就来分析它的源代码：
- (id <SDWebImageOperation>)downloadImageWithURL:(NSURL *)url
options:(SDWebImageOptions)options
progress:(SDWebImageDownloaderProgressBlock)progressBlock
completed:(SDWebImageCompletionWithFinishedBlock)completedBlock {
// Invoking this method without a completedBlock is pointless
NSAssert(completedBlock != nil, @"If you mean to prefetch the image, use -[SDWebImagePrefetcher prefetchURLs] instead");
// Very common mistake is to send the URL using NSString object instead of NSURL. For some strange reason, XCode won't
// throw any warning for this type mismatch. Here we failsafe this error by allowing URLs to be passed as NSString.
if ([url isKindOfClass:NSString.class]) {
url = [NSURL URLWithString:(NSString *)url];
}
// Prevents app crashing on argument type error like sending NSNull instead of NSURL
if (![url isKindOfClass:NSURL.class]) {
url = nil;
}
__block SDWebImageCombinedOperation *operation = [SDWebImageCombinedOperation new];
__weak SDWebImageCombinedOperation *weakOperation = operation;
// 如果是曾经失败的url 且当前的options不需重新尝试失败的链接，则直接返回错误
BOOL isFailedUrl = NO;
@synchronized (self.failedURLs) {
isFailedUrl = [self.failedURLs containsObject:url];
}
if (url.absoluteString.length == 0 || (!(options & SDWebImageRetryFailed) && isFailedUrl)) {
dispatch_main_sync_safe(^{
NSError *error = [NSError errorWithDomain:NSURLErrorDomain code:NSURLErrorFileDoesNotExist userInfo:nil];
completedBlock(nil, error, SDImageCacheTypeNone, YES, url);
});
return operation;
}
@synchronized (self.runningOperations) {
[self.runningOperations addObject:operation];
}
NSString *key = [self cacheKeyForURL:url];
// step1. 先读取缓存
operation.cacheOperation = [self.imageCache queryDiskCacheForKey:key done:^(UIImage *image, SDImageCacheType cacheType) {
// 读取缓存结束(可能有缓存， 也可能没有)
/////////////////////////////////////////////
if (operation.isCancelled) {
@synchronized (self.runningOperations) {
[self.runningOperations removeObject:operation];
}
return;
}
//// 缓存没有或必须刷新缓存等， 走network download路线
///////////////////////////////////////
if ((!image || options & SDWebImageRefreshCached) && (![self.delegate respondsToSelector:@selector(imageManager:shouldDownloadImageForURL:)] || [self.delegate imageManager:self shouldDownloadImageForURL:url])) {
if (image && options & SDWebImageRefreshCached) {
dispatch_main_sync_safe(^{
// If image was found in the cache but SDWebImageRefreshCached is provided, notify about the cached image
// AND try to re-download it in order to let a chance to NSURLCache to refresh it from server.
completedBlock(image, nil, cacheType, YES, url);
});
}
// download if no image or requested to refresh anyway, and download allowed by delegate
/////////////////////////////////////////////////////////////////////
// step1. 将外部传入的SDWebImageOptions 转化为 SDWebImageDownloaderOptions
SDWebImageDownloaderOptions downloaderOptions = 0;
if (options & SDWebImageLowPriority) downloaderOptions |= SDWebImageDownloaderLowPriority;
if (options & SDWebImageProgressiveDownload) downloaderOptions |= SDWebImageDownloaderProgressiveDownload;
if (options & SDWebImageRefreshCached) downloaderOptions |= SDWebImageDownloaderUseNSURLCache;
if (options & SDWebImageContinueInBackground) downloaderOptions |= SDWebImageDownloaderContinueInBackground;
if (options & SDWebImageHandleCookies) downloaderOptions |= SDWebImageDownloaderHandleCookies;
if (options & SDWebImageAllowInvalidSSLCertificates) downloaderOptions |= SDWebImageDownloaderAllowInvalidSSLCertificates;
if (options & SDWebImageHighPriority) downloaderOptions |= SDWebImageDownloaderHighPriority;
if (image && options & SDWebImageRefreshCached) { // 特殊处理一下 SDWebImageRefreshCached 请求的options
// force progressive off if image already cached but forced refreshing
downloaderOptions &= ~SDWebImageDownloaderProgressiveDownload;
// ignore image read from NSURLCache if image if cached but force refreshing
downloaderOptions |= SDWebImageDownloaderIgnoreCachedResponse;
}
// step2. 利用SDWebImageDownloader开始下载 并返回一个 id <SDWebImageOperation>subOperation 代表当前下载operation(这里利用operation的cancel block对subOperaton 进行retain)
id <SDWebImageOperation> subOperation = [self.imageDownloader downloadImageWithURL:url options:downloaderOptions progress:progressBlock completed:^(UIImage *downloadedImage, NSData *data, NSError *error, BOOL finished) {
__strong __typeof(weakOperation) strongOperation = weakOperation;
if (!strongOperation || strongOperation.isCancelled) {
// Do nothing if the operation was cancelled
// See #699 for more details
// if we would call the completedBlock, there could be a race condition between this block and another completedBlock for the same object, so if this one is called second, we will overwrite the new data
}
else if (error) {
dispatch_main_sync_safe(^{
if (strongOperation && !strongOperation.isCancelled) {
completedBlock(nil, error, SDImageCacheTypeNone, finished, url);
}
});
if ( error.code != NSURLErrorNotConnectedToInternet
&& error.code != NSURLErrorCancelled
&& error.code != NSURLErrorTimedOut
&& error.code != NSURLErrorInternationalRoamingOff
&& error.code != NSURLErrorDataNotAllowed
&& error.code != NSURLErrorCannotFindHost
&& error.code != NSURLErrorCannotConnectToHost) {
@synchronized (self.failedURLs) {
[self.failedURLs addObject:url];
}
}
}
else {
if ((options & SDWebImageRetryFailed)) {
@synchronized (self.failedURLs) {
[self.failedURLs removeObject:url];
}
}
// 下载成功，做cache
BOOL cacheOnDisk = !(options & SDWebImageCacheMemoryOnly);
if (options & SDWebImageRefreshCached && image && !downloadedImage) { // 如果download是因为refresh cache引起，而又没有真正的download image下来，什么也不做
// Image refresh hit the NSURLCache cache, do not call the completion block
}
else if (downloadedImage && (!downloadedImage.images || (options & SDWebImageTransformAnimatedImage)) && [self.delegate respondsToSelector:@selector(imageManager:transformDownloadedImage:withURL:)]) {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
UIImage *transformedImage = [self.delegate imageManager:self transformDownloadedImage:downloadedImage withURL:url];
if (transformedImage && finished) {
BOOL imageWasTransformed = ![transformedImage isEqual:downloadedImage];
[self.imageCache storeImage:transformedImage recalculateFromImage:imageWasTransformed imageData:(imageWasTransformed ? nil : data) forKey:key toDisk:cacheOnDisk];
}
dispatch_main_sync_safe(^{
if (strongOperation && !strongOperation.isCancelled) {
completedBlock(transformedImage, nil, SDImageCacheTypeNone, finished, url);
}
});
});
}
else {
if (downloadedImage && finished) {
[self.imageCache storeImage:downloadedImage recalculateFromImage:NO imageData:data forKey:key toDisk:cacheOnDisk];
}
// 回调
dispatch_main_sync_safe(^{
if (strongOperation && !strongOperation.isCancelled) {
completedBlock(downloadedImage, nil, SDImageCacheTypeNone, finished, url);
}
});
}
}
// 如果结束，则删除该SDWebImageCombinedOperation
if (finished) {
@synchronized (self.runningOperations) {
if (strongOperation) {
[self.runningOperations removeObject:strongOperation];
}
}
}
}];
// step3. 设置operation的cancel block
operation.cancelBlock = ^{
[subOperation cancel];
@synchronized (self.runningOperations) {
__strong __typeof(weakOperation) strongOperation = weakOperation;
if (strongOperation) {
[self.runningOperations removeObject:strongOperation];
}
}
};
}
else if (image) {
dispatch_main_sync_safe(^{
__strong __typeof(weakOperation) strongOperation = weakOperation;
if (strongOperation && !strongOperation.isCancelled) {
completedBlock(image, nil, cacheType, YES, url);
}
});
@synchronized (self.runningOperations) {
[self.runningOperations removeObject:operation];
}
}
else {
// Image not in cache and download disallowed by delegate
dispatch_main_sync_safe(^{
__strong __typeof(weakOperation) strongOperation = weakOperation;
if (strongOperation && !weakOperation.isCancelled) {
completedBlock(nil, nil, SDImageCacheTypeNone, YES, url);
}
});
@synchronized (self.runningOperations) {
[self.runningOperations removeObject:operation];
}
}
}];
return operation;
}
代码的逻辑大致分为三部分：
- 先判断image的URL是否合法
2.若URL合法，则先读取缓存
3.若缓存没有该文件，则在网络上下载
通过注释，应该也不难理解。
略过检查URL合法性的代码，我们首先来看SDWebImage是如何读取Cache的。
也就是
SDImageCache 类 的
- (NSOperation *)queryDiskCacheForKey:(NSString *)key done:(SDWebImageQueryCompletedBlock)doneBlock; 方法。
SDImageCache
我们先看queryDiskCacheForKey的方法声明：
typedef NS_ENUM(NSInteger, SDImageCacheType) {
/**
* The image wasn't available the SDWebImage caches, but was downloaded from the web.
*/
SDImageCacheTypeNone = 1,
/**
* The image was obtained from the disk cache.
*/
SDImageCacheTypeDisk,
/**
* The image was obtained from the memory cache.
*/
SDImageCacheTypeMemory
};
typedef void(^SDWebImageQueryCompletedBlock)(UIImage *image, SDImageCacheType cacheType);
/**
* Query the disk cache asynchronously.
*
* @param key The unique key used to store the wanted image
*/
- (NSOperation *)queryDiskCacheForKey:(NSString *)key done:(SDWebImageQueryCompletedBlock)doneBlock;
- queryDiskCacheForKey的返回值为一个NSOperation对象，外部可以通过该对象取消cache的查找过程。
注意，这里SDWebImage多次使用了该思路（加载Image，下载Image），通过同步的返回一个代表当前操作的对象，来对异步操作进行管理。 - 参数接受一个URL MD5值作为Key查找Cache。
- 在回调block中，返回UIImage，并用SDImageCacheType来表明缓存文件的来源：没有，内存，磁盘。
这里，我们也可以得知SDWebImage的cache策略，先读内存，没有命中，才去读磁盘。
我们再来看他的具体实现
- (NSOperation *)queryDiskCacheForKey:(NSString *)key done:(SDWebImageQueryCompletedBlock)doneBlock {
if (!doneBlock) {
return nil;
}
if (!key) {
doneBlock(nil, SDImageCacheTypeNone);
return nil;
}
// First check the in-memory cache...
UIImage *image = [self imageFromMemoryCacheForKey:key]; // NSCache is threadsafe, don't need lock
if (image) {
doneBlock(image, SDImageCacheTypeMemory);
return nil;
}
// Second check disk cache...
NSOperation *operation = [NSOperation new]; // 这个NSOperation 对象的意义在于向外提供了cancel读取disk cache的对象
dispatch_async(self.ioQueue, ^{ // aync call. Note there sync io operation by serial queue
if (operation.isCancelled) {
return;
}
@autoreleasepool {
UIImage *diskImage = [self diskImageForKey:key];
if (diskImage && self.shouldCacheImagesInMemory) {
NSUInteger cost = SDCacheCostForImage(diskImage);
[self.memCache setObject:diskImage forKey:key cost:cost];
}
dispatch_async(dispatch_get_main_queue(), ^{ // return to main queue
doneBlock(diskImage, SDImageCacheTypeDisk);
});
}
});
return operation;
}
- First check in-memory cahce.
这里的memory cahce用了继承自系统的NSCache的AutoPurgeCache对象。该对象在init时会注册监听系统的
UIApplicationDidReceiveMemoryWarningNotification通知。
当系统内存告警时，会自动清除所有的memory cache：
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(removeAllObjects) name:UIApplicationDidReceiveMemoryWarningNotification object:nil];
Second check disk cache。
这里注意到，之前都是同步的返回nil，而在读取disk缓存时，才返回一个operation对象。这是因为之前的读取内存cache都是同步的，而这里disk读取Cache时异步的，为了为异步操作做管理，才需要想外返回一个operation对象以便随时可以cancel该异步操作。
在读取disk cache时，为了防止多线程同时读写一个文件，这里用到了
串行队列
self.ioQueue
来串行化io操作。这是我们可以借鉴的地方，利用串行队列而非lock来保证线程安全。当从disk读取缓存后，再将disk缓存存入memory cache。
调用done block，将UIImage的cache（如果有的话），以及Cache来源返回。
SDWebImage的Cache策略
那么，SDWebImage通过SDWebCache读取Cache的流程如下：
在下一篇文章中，我会接着和大家一起分析，当Cache未命中时，SDWebImage是如何在网络下载图片，并更新Cahce的。
