SDWebImage 图片下载

前端时间完成云相册经常使用到 SDWebImage 来进行图片加载，但对于图片加载过程中怎么样实现不会深究。下面小编就对 SDWebImage 进行相应的分析：

SDWebImage 的下载器

SDWebImage 的下载器是 SDWebImageDownloader 利用单例模式sharedDownloader，可以对下载的图片进行相关配置。
可以配置的部分如下：

  • 下载选项
  • HTTP的头部
  • 压缩、下载超时、下载顺序、最大并发数等

下载选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
typedef NS_OPTIONS(NSUInteger, SDWebImageDownloaderOptions) {
   //下载的优先级低
    SDWebImageDownloaderLowPriority = 1 << 0,
   //下载进度
    SDWebImageDownloaderProgressiveDownload = 1 << 1,
   //下载路径缓存
    SDWebImageDownloaderUseNSURLCache = 1 << 2,
   //下载过程的请求缓存
    SDWebImageDownloaderIgnoreCachedResponse = 1 << 3,
   //后台进行继续下载
    SDWebImageDownloaderContinueInBackground = 1 << 4,    
   //处理 cookies
    SDWebImageDownloaderHandleCookies = 1 << 5,
   //循序无效的 SSL 证书
    SDWebImageDownloaderAllowInvalidSSLCertificates = 1 << 6,
   //下载优先级高
    SDWebImageDownloaderHighPriority = 1 << 7,
};

HTTP的头部设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#ifdef SD_WEBP
        _HTTPHeaders = [@{@"Accept": @"image/webp,image/*;q=0.8"} mutableCopy];
#else
        _HTTPHeaders = [@{@"Accept": @"image/*;q=0.8"} mutableCopy];
#endif

-(void)setValue:(NSString *)value forHTTPHeaderField:(NSString *)field {
    if (value) {
        self.HTTPHeaders[field] = value;
    }
    else {
        [self.HTTPHeaders removeObjectForKey:field];
    }
}

-(NSString *)valueForHTTPHeaderField:(NSString *)field {
    return self.HTTPHeaders[field];
}

我们可以通过上述 forHTTPHeaderField 的参数进行相应 HTTPheader 的设置，使用者可以对头部信息进行相关的添加或者是删除 HTTP 头部信息。

线程安全

在图片下载过程中我们要保线程访问的安全性，barrierQueue 是实现网络响应的序列化实例。

1
2
3
4
// This queue is used to serialize the handling of the network responses of all
the download operation in a single queue
//所有下载请求均放在此单线程队列中
@property (SDDispatchQueueSetterSementics, nonatomic) dispatch_queue_t barrierQueue;

在保证线程安全的起见，我们对于 URLCallbacks进行增改都需要放在dispatch_barrier_sync的形式放入到 barrierQueue。
但是如果我们只要进行相关的查询那就使用 dispatch_sync 放入 barrierQueue 中即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
__block NSArray *callbacksForURL;
dispatch_sync(sself.barrierQueue, ^{
    callbacksForURL = [sself.URLCallbacks[url] copy];
});

dispatch_barrier_sync(self.barrierQueue, ^{
    BOOL first = NO;
    if (!self.URLCallbacks[url]) {
        self.URLCallbacks[url] = [NSMutableArray new];
        first = YES;
    }
// Handle single download of simultaneous download request for the same URL
NSMutableArray *callbacksForURL = self.URLCallbacks[url];
NSMutableDictionary *callbacks = [NSMutableDictionary new];
if (progressBlock) callbacks[kProgressCallbackKey] = [progressBlock copy];
if (completedBlock) callbacks[kCompletedCallbackKey] = [completedBlock copy];
[callbacksForURL addObject:callbacks];
self.URLCallbacks[url] = callbacksForURL;
if (first) {
      createCallback();
}
});

回调

在我们下载图片的过程中，每一张图片都需要开启一个线程，在每一个线程中都需要对执行一定的回调信息。这些回调的信息会以 block 的实行出现：

1
2
3
4
5
6
7
8
typedef void(^ SDWebImageDownloaderProgressBlock)(NSInteger receivedSize,
NSInteger expectedSize);

typedef void(^ SDWebImageDownloaderCompletedBlock)(UIImage *image, NSData *data,
NSError *error, BOOL finished);

typedef NSDictionary *(^ SDWebImageDownloaderHeadersFilterBlock)(NSURL *url, 
NSDictionary *headers);

图片下载的这些回调信息存储在 SDWebImageDownloader 类的 URLCallbacks 属性中，该属性是一个字典，key 是图片的 URL 地址，value 则是一个数组，包含每个图片的多组回调信息。

下载器

整个下载过程中我们需要执行在本小结讲述的下载器中进行，下载器对于下载的管理都是放在-(id <SDWebImageOperation>)downloadImageWithURL:中的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
- (id <SDWebImageOperation>)downloadImageWithURL:(NSURL *)url options:(SDWebImageDownloaderOptions)options progress:( SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageDownloaderCompletedBlock)completedBlock {
__block SDWebImageDownloaderOperation *operation;
__weak __typeof(self)wself = self;
[self addProgressCallback:progressBlock completedBlock:completedBlock forURL:url createCallback:^{
        NSTimeInterval timeoutInterval = wself.downloadTimeout;
        if (timeoutInterval == 0.0) {
            timeoutInterval = 15.0;
        }

// In order to prevent from potential duplicate caching (NSURLCache + SDImageCache) we disable the cache for image requests if told otherwise

NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:url
cachePolicy:(options &  SDWebImageDownloaderUseNSURLCache ? 
NSURLRequestUseProtocolCachePolicy : NSURLRequestReloadIgnoringLocalCacheData)
timeoutInterval:timeoutInterval];
request.HTTPShouldHandleCookies = (options & SDWebImageDownloaderHandleCookies);
request.HTTPShouldUsePipelining = YES;
      if (wself.headersFilter) {
          request.allHTTPHeaderFields = wself.headersFilter(url, [wself.HTTPHeaders copy]);
      }
      else {
          request.allHTTPHeaderFields = wself.HTTPHeaders;
      }
      operation = [[wself.operationClass alloc] initWithRequest:request
                                                        options:options
                                                       progress:^(NSInteger receivedSize, NSInteger expectedSize) {
                                                            SDWebImageDownloader *sself = wself;
                                                                        if (!sself) return;
                                                                        __block NSArray *callbacksForURL;
                                                           dispatch_sync(sself.barrierQueue, ^{
                                                               callbacksForURL = [sself.URLCallbacks[url] copy];
                                                           });
                                                           for (NSDictionary *callbacks in callbacksForURL) {
                                                               dispatch_async(dispatch_get_main_queue(), ^{
                                                                    SDWebImageDownloaderProgressBlock callback = callbacks[kProgressCallbackKey];
                                                                   if (callback) callback(receivedSize, expectedSize);
                                                               });
                                                           }
                                                       }
                                                      completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
                                                           SDWebImageDownloader *sself = wself;
                                                          if (!sself) return;
                                                          __block NSArray *callbacksForURL;
                                                          dispatch_barrier_sync(sself.barrierQueue, ^{
                                                              callbacksForURL = [sself.URLCallbacks[url] copy];
                                                              if (finished) {
                                                                  [sself.URLCallbacks removeObjectForKey:url];
                                                              }
                                                          });
                                                          for (NSDictionary *callbacks in callbacksForURL) {
                                                               SDWebImageDownloaderCompletedBlock callback = callbacks[kCompletedCallbackKey];
                                                              if (callback) callback(image, data, error, finished);
                                                          }
                                                      }
                                                      cancelled:^{
                                                           SDWebImageDownloader *sself = wself;
                                                          if (!sself) return;
                                                          dispatch_barrier_async(sself.barrierQueue, ^{
                                                              [sself.URLCallbacks removeObjectForKey:url];
                                                          });
                                                      }];
      operation.shouldDecompressImages = wself.shouldDecompressImages;
      
      if (wself.urlCredential) {
          operation.credential = wself.urlCredential;
      } else if (wself.username && wself.password) {
          operation.credential = [NSURLCredential credentialWithUser:wself.username password:wself.password persistence:NSURLCredentialPersistenceForSession];
      }
      
      if (options & SDWebImageDownloaderHighPriority) {
          operation.queuePriority = NSOperationQueuePriorityHigh;
      } else if (options & SDWebImageDownloaderLowPriority) {
          operation.queuePriority = NSOperationQueuePriorityLow;
      }

      [wself.downloadQueue addOperation:operation];
      if (wself.executionOrder ==  SDWebImageDownloaderLIFOExecutionOrder) {
          // Emulate LIFO execution order by systematically adding new operations as last operation's dependency
          [wself.lastAddedOperation addDependency:operation];
          wself.lastAddedOperation = operation;
      }
  }];

  return operation;
}

我们在上面的方法中调用的方法 -(void)addProgressCallback:completedBlock:forURL:createCallback: 将在访问图片请求的信息直接放入下载器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
- (void)addProgressCallback:( SDWebImageDownloaderProgressBlock)progressBlock completedBlock:( SDWebImageDownloaderCompletedBlock)completedBlock forURL:(NSURL*)url createCallback:( SDWebImageNoParamsBlock)createCallback {
// The URL will be used as the key to the callbacks dictionary so it cannot be nil. If it is nil immediately call the completed block with no image or data.
    if (url == nil) {
        if (completedBlock != nil) {
            completedBlock(nil, nil, nil, NO);
        }
        return;
    }
dispatch_barrier_sync(self.barrierQueue, ^{
   BOOL first = NO;
   if (!self.URLCallbacks[url]) {
       self.URLCallbacks[url] = [NSMutableArray new];
       first = YES;
   }

   // Handle single download of simultaneous download request for the same URL
   NSMutableArray *callbacksForURL = self.URLCallbacks[url];
   NSMutableDictionary *callbacks = [NSMutableDictionary new];
   if (progressBlock) callbacks[kProgressCallbackKey] = [progressBlock copy];
   if (completedBlock) callbacks[kCompletedCallbackKey] = [completedBlock copy];
   [callbacksForURL addObject:callbacks];
   self.URLCallbacks[url] = callbacksForURL;

   if (first) {
       createCallback();
   }
});
}

下载操作

在每张图片下载过程中都要调用一次具体的操作都会调用 Operation，下面就分析一下中间的具体过程。
我们打开 SDWebImage 的文件夹可以到其中有一个 SDWebImageOperation 的类，如下：

1
2
3
4
5
6
7
#import <Foundation/Foundation.h>

@protocol  SDWebImageOperation <NSObject>

- (void)cancel;

@end

其中我们使用 NSOpation 的子类来完成具体图片下载的过程，这个类就是 SDWebImageDownloaderOperation 。在 SDWebImageDownloaderOperation 类中继承 NSOperation 的类而且实现 SDWebImageOperation的cancel 的取消协议。除了继承而来的方法，该类只向外暴露了一个方法，即上面所用到的初始化方法-initWithRequest:options:pregress:completed:cancelled:。

对于图片的下载， SDWebImageDownloaderOperation 完全依赖于 URL 加载系统中的 NSURLConnection 类（并未使用 iOS7 以后的 NSURLSession 类）。我们先来分析一下 SDWebImageDownloaderOperation 类中对于图片实际数据的下载处理，即 NSURLConnection 各代理方法的实现。

首先， SDWebImageDownloaderOperation 在 Extention 中采用了NSURLConnectionDataDelegate 协议，并实现了协议的以下几个方法：

1
2
3
4
5
6
7
connection:didReceiveResponse:
connection:didReceiveData:
connectionDidFinishLoading:
connection:didFailWithError:
connection:willCacheResponse:
connectionShouldUseCredentialStorage:
connection:willSendRequestForAuthenticationChallenge:

这些方法我们就不逐一分析了，就终点分析一下 connection:didReceiveResponse: 和 connection:didReceiveData: 两个方法。

connection:didReceiveResponse 方法通过判断 NSURLResponse 的实际类型和状态码，对除 304 以外 400 以内的状态码反应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
 
 //'304 Not Modified' is an exceptional one
 if (![response respondsToSelector:@selector(statusCode)] ||([((NSHTTPURLResponse *)response) statusCode] < 400 && [((NSHTTPURLResponse  *)response) statusCode] != 304)) {
      NSInteger expected = response.expectedContentLength > 0 ? (NSInteger)
      response.expectedContentLength : 0;
     self.expectedSize = expected;
     if (self.progressBlock) {
         self.progressBlock(0, expected);
     }

  self.imageData = [[NSMutableData alloc] initWithCapacity:expected];
  self.response = response;
  dispatch_async(dispatch_get_main_queue(), ^{
      [[NSNotificationCenter defaultCenter] postNotificationName:
       SDWebImageDownloadReceiveResponseNotification object:self];
  });
}
else {
   NSUInteger code = [((NSHTTPURLResponse *)response) statusCode];
   
   //This is the case when server returns '304 Not Modified'. It means that 
   remote image is not changed.
   //In case of 304 we need just cancel the operation and return cached image       
   from the cache.
   if (code == 304) {
       [self cancelInternal];
   } else {
       [self.connection cancel];
   }
   dispatch_async(dispatch_get_main_queue(), ^{
       [[NSNotificationCenter defaultCenter] postNotificationName: SDWebImageDownloadStopNotification object:self];
   });

   if (self.completedBlock) {
       self.completedBlock(nil, nil, [NSError errorWithDomain:
       NSURLErrorDomain code:[((NSHTTPURLResponse *)response) statusCode] 
       userInfo:nil], YES);
   }
   CFRunLoopStop(CFRunLoopGetCurrent());
   [self done];
 }
}

connection:didReceiveData: 方法的主要任务是接受数据。每次接收到数据时，都会用现有的数据创建一个CGImageSourceRef 对象以作处理。在首次获取到数据时（width+height==0）会从这些包含图像信息的数据中取出图像的长、宽、方向等信息以备使用。而后在图片下载完成之前，会使用 CGImageSourceRef 对象创建一个图像对象，经过缩放、解压缩操作后生成一个 UIImage 对象供完成回调使用。当然，在这个方法中还需要处理的就是进度信息。如果我们有设置进度回调的话，就调用进度回调以处理当前图片的下载进度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
    [self.imageData appendData:data];

    if ((self.options &  SDWebImageDownloaderProgressiveDownload) && self.expectedSize > 0 && self.completedBlock) {
// The following code is from http://www.cocoaintheshell.com/2011/05/
progressive-images-download-imageio/
// Thanks to the author @Nyx0uf

// Get the total bytes downloaded 
     const NSInteger totalSize = self.imageData.length;

// Update the data source, we must pass ALL the data, not just the new bytes
     CGImageSourceRef imageSource = CGImageSourceCreateWithData((__bridge CFDataRef)self.imageData, NULL);

        if (width + height == 0) {
            CFDictionaryRef properties = CGImageSourceCopyPropertiesAtIndex(imageSource, 0, NULL);
            if (properties) {
                NSInteger orientationValue = -1;
                CFTypeRef val = CFDictionaryGetValue(properties, kCGImagePropertyPixelHeight);
                if (val) CFNumberGetValue(val, kCFNumberLongType, &height);
                val = CFDictionaryGetValue(properties, kCGImagePropertyPixelWidth);
                if (val) CFNumberGetValue(val, kCFNumberLongType, &width);
                val = CFDictionaryGetValue(properties, kCGImagePropertyOrientation);
                if (val) CFNumberGetValue(val, kCFNumberNSIntegerType, &orientationValue);
                CFRelease(properties);
// When we draw to Core Graphics, we lose orientation information,
// which means the image below born of initWithCGIImage will be
// oriented incorrectly sometimes. (Unlike the image born of initWithData
// in connectionDidFinishLoading.) So save it here and pass it on later.

                orientation = [[self class] orientationFromPropertyValue:(orientationValue == -1 ? 1 : orientationValue)];
            }

        }

        if (width + height > 0 && totalSize < self.expectedSize) {
            // Create the image
            CGImageRef partialImageRef = CGImageSourceCreateImageAtIndex(imageSource, 0, NULL);

#ifdef TARGET_OS_IPHONE
            // Workaround for iOS anamorphic image
            if (partialImageRef) {
                const size_t partialHeight = CGImageGetHeight(partialImageRef);
                CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
                CGContextRef bmContext = CGBitmapContextCreate(NULL, width, height, 8, width * 4, colorSpace, kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedFirst);
                CGColorSpaceRelease(colorSpace);
                if (bmContext) {
                    CGContextDrawImage(bmContext, (CGRect){.origin.x = 0.0f, .origin.y = 0.0f, .size.width = width, .size.height = partialHeight}, partialImageRef);
                    CGImageRelease(partialImageRef);
                    partialImageRef = CGBitmapContextCreateImage(bmContext);
                    CGContextRelease(bmContext);
                }
                else {
                    CGImageRelease(partialImageRef);
                    partialImageRef = nil;
                }
            }
#endif

            if (partialImageRef) {
                UIImage *image = [UIImage imageWithCGImage:partialImageRef scale:1 orientation:orientation];
                NSString *key = [[ `SDWebImage` Manager sharedManager] cacheKeyForURL:self.request.URL];
                UIImage *scaledImage = [self scaledImageForKey:key image:image];
                if (self.shouldDecompressImages) {
                    image = [UIImage decodedImageWithImage:scaledImage];
                }
                else {
                    image = scaledImage;
                }
                CGImageRelease(partialImageRef);
                dispatch_main_sync_safe(^{
                    if (self.completedBlock) {
                        self.completedBlock(image, nil, nil, NO);
                    }
                });
            }
        }

        CFRelease(imageSource);
    }

    if (self.progressBlock) {
        self.progressBlock(self.imageData.length, self.expectedSize);
    }
}

我们前面说过 SDWebImageDownloaderOperation 类是继承自 NSOperation 类。它没有简单的实现 main 方法，而是采用更加灵活的 start 方法，以便自己管理下载的状态。

在 start 方法中，创建了我们下载所使用的 NSURLConnection 对象，开启了图片的下载，同时抛出一个下载开始的通知。start 方法的具体实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
- (void)start {
    @synchronized (self) {
        if (self.isCancelled) {
            self.finished = YES;
            [self reset];
            return;
        }

#if TARGET_OS_IPHONE && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_4_0
        Class UIApplicationClass = NSClassFromString(@"UIApplication");
        BOOL hasApplication = UIApplicationClass && [UIApplicationClass respondsToSelector:@selector(sharedApplication)];
        if (hasApplication && [self shouldContinueWhenAppEntersBackground]) {
            __weak __typeof__ (self) wself = self;
            UIApplication * app = [UIApplicationClass performSelector:@selector(sharedApplication)];
            self.backgroundTaskId = [app beginBackgroundTaskWithExpirationHandler:^{
                __strong __typeof (wself) sself = wself;

                if (sself) {
                    [sself cancel];

                    [app endBackgroundTask:sself.backgroundTaskId];
                    sself.backgroundTaskId = UIBackgroundTaskInvalid;
                }
            }];
        }
#endif

        self.executing = YES;
        self.connection = [[NSURLConnection alloc] initWithRequest:self.request delegate:self startImmediately:NO];
        self.thread = [NSThread currentThread];
    }

    [self.connection start];

    if (self.connection) {
        if (self.progressBlock) {
            self.progressBlock(0, NSURLResponseUnknownLength);
        }
        dispatch_async(dispatch_get_main_queue(), ^{
            [[NSNotificationCenter defaultCenter] postNotificationName: `SDWebImage` DownloadStartNotification object:self];
        });

        if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_5_1) {
            // Make sure to run the runloop in our background thread so it can process downloaded data
            // Note: we use a timeout to work around an issue with NSURLConnection cancel under iOS 5
            //       not waking up the runloop, leading to dead threads (see https://github.com/rs/ `SDWebImage` /issues/466)
            CFRunLoopRunInMode(kCFRunLoopDefaultMode, 10, false);
        }
        else {
            CFRunLoopRun();
        }

        if (!self.isFinished) {
            [self.connection cancel];
            [self connection:self.connection didFailWithError:[NSError errorWithDomain:NSURLErrorDomain code:NSURLErrorTimedOut userInfo:@{NSURLErrorFailingURLErrorKey : self.request.URL}]];
        }
    }
    else {
        if (self.completedBlock) {
            self.completedBlock(nil, nil, [NSError errorWithDomain:NSURLErrorDomain code:0 userInfo:@{NSLocalizedDescriptionKey : @"Connection can't be initialized"}], YES);
        }
    }

#if TARGET_OS_IPHONE && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_4_0
    Class UIApplicationClass = NSClassFromString(@"UIApplication");
    if(!UIApplicationClass || ![UIApplicationClass respondsToSelector:@selector(sharedApplication)]) {
        return;
    }
    if (self.backgroundTaskId != UIBackgroundTaskInvalid) {
        UIApplication * app = [UIApplication performSelector:@selector(sharedApplication)];
        [app endBackgroundTask:self.backgroundTaskId];
        self.backgroundTaskId = UIBackgroundTaskInvalid;
    }
#endif
}

在下载完后或者是下载失败后都会停止当前调用的 runloop，清楚链接随后就抛出下载停止的消息。
如果下载成功，则会处理完整的图片数据，对其进行适当的缩放与解压缩操作，以提供给完成回调使用。具体可参考-connectionDidFinishLoading: 与 -connection:didFailWithError:的实现。

总结

我们在上面的介绍可以看出在下载图片的过程中，每次下载图片都会调用 NSOperation的函数进行处理，每次数据实际实现是使用 NSURLConnection 。我们把具体实现的线程放置在队列中进行执行操作。如果下载成功，则会处理完整的图片数据，对其进行适当的缩放与解压缩操作，以提供给完成回调使用。具体可参考-connectionDidFinishLoading: 与 -connection:didFailWithError: 的实现。

参考资料：
源码地址
下一节我们将讲述如何对下载的图片进行缓存处理

扫一扫，分享到微信

微信分享二维码
× 文章目录
  1. 1. SDWebImage 的下载器
    1. 1.1. 下载选项
    2. 1.2. HTTP的头部设置
    3. 1.3. 线程安全
    4. 1.4. 回调
    5. 1.5. 下载器
    6. 1.6. 下载操作
    7. 1.7. 总结
iOS 开发者<br><br>一位拥有梦想，脚踏实地的 90 后<br> <br>Good luck~