浅谈SDWebImage

SDWebImage

SDWebImage构成

UIImageView+WebCache

UIImageView+WebCache以及其他几个视图的类别,都是进行网络图片赋值的入口,通过这些类别的方法,调用SDWebImageManager来进行图片加载以及赋值。

SDWebImageManager

单例设计模式实现,管理整个进程中涉及到SDWebImage的图片处理过程,在这个类里面执行请求容错处理,查找缓存图片,发起图片加载,缓存图片。

SDWebImageDownloader

单例设计模式实现,管理整个进程中涉及到SDWebImage的图片加载过程,这这个类里面执行网络请求的设置,并将单独的网络请求任务通过NSOperationQueue进行异步执行,并给任务添加依赖,确保不会发生线程阻塞。

SDWebImageDownloaderOperation

继承自NSOperation,重写了start方法,并在start方法中进行发起NSURLConnection的网络请求;在NSURLConnection的代理方法中对返回的结果进行处理,并将正确的图片数据通过Image I/O转换为正确格式的图片。

SDImageCache

单例设计模式实现,通过NSCache处理图片缓存业务,使用GCD在子线程进行图片的I/O读写,以键-值对应的形式储存URL对应的图片,存储的区域有Disk和Memeroy两种(磁盘和内存)。

SDWebImageCompat

SDWebImage的宏定义以及图片尺寸处理。

SDWebImageDecoder

单例设计模式实现,使用QuartzCore框架的CGImageRef对图片进行解码处理。

SDWebImagePrefetcher

单例设计模式实现,进行图片的预先加载。

NSData+ImageContentType

识别图片的类型。

SDWebImage的加载图片的过程

拿我们最常使用的一个方法来举例

第一步.UIImageview使用类别方法

使用类别方法作为入口,将图片链接给到方法中,SDWebImage会首先取消当前当前视图的图片加载任务,然后根据条件给视图赋上占位图片。这里会给每个视图创建一个图片加载的任务,异步执行,在图片请求成功并处理完成时,会通过回调将图片在主线程给赋值到视图上。

-(void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder;  
第二步. SDWebImageManager进行URL处理

SDWebImage内部调用使用SDWebImageManager方法:

- (id <SDWebImageOperation>)downloadImageWithURL:(NSURL *)url
                    options:(SDWebImageOptions)options
                   progress:(SDWebImageDownloaderProgressBlock)progressBlock
                  completed:(SDWebImageCompletionWithFinishedBlock)completedBlock;
  • 在这个方法里先做一些错误防御诸如传递进来的URL的类型是否符合NSURL,再判断请求的URL是否在之前请求失败过等错误防御,如果不能通过URL加载图片,会提前执行completedBlock回调。注意这句代码,这里使用了互斥锁,保证访问对象的同时不会被改变。
BOOL isFailedUrl = NO;
@synchronized (self.failedURLs) {
        isFailedUrl = [self.failedURLs containsObject:url];
}
  • 在错误防御做完之后通过SDImageCache先通过URL判断是否有对应的图片缓存在本地,如果有本地缓存且用户不需要重新请求,则直接将图片在主线程通过回调传递给视图,最终将图片赋值给对应视图。
第三步. SDWebImageDownloader进行Request处理

在未获取到URL对应的本地图片的情况下,会通过SDWebImageDownloader的加载方法通过网络加载图片,如下:

- (id <SDWebImageOperation>)downloadImageWithURL:(NSURL *)url
                    options:(SDWebImageDownloaderOptions)options
                   progress:(SDWebImageDownloaderProgressBlock)progressBlock
                  completed:(SDWebImageDownloaderCompletedBlock)completedBlock;
  • 在这个方法里面,首先是进行NSMutableURLRequest一些参数配置比如超时时间,请求头等,然后会生成一个网络加载图片的任务SDWebImageDownloaderOperation,这些任务会依赖SDWebImageDownloader的下载队列downloadQueue内的最后一个任务,当downloadQueue最后添加的lastAddedOperation任务返回,才会继续下一个任务进行图片加载。
 [wself.downloadQueue addOperation:operation];
     if (wself.executionOrder == SDWebImageDownloaderLIFOExecutionOrder) {
         [wself.lastAddedOperation addDependency:operation];
         wself.lastAddedOperation = operation;
     }

第四步. SDWebImageDownloaderOperation网络加载

SDWebImageDownloader中会通过以下方法创建SDWebImageDownloaderOperation

- (id)initWithRequest:(NSURLRequest *)request
              options:(SDWebImageDownloaderOptions)options
             progress:(SDWebImageDownloaderProgressBlock)progressBlock
            completed:(SDWebImageDownloaderCompletedBlock)completedBlock
            cancelled:(SDWebImageNoParamsBlock)cancelBlock;

SDWebImageDownloaderOperation重写了NSOperation的start:方法,并在start:方法中进行NSURLConnectiona的网络请求,并在NSURLConnection的delegate中进行返回值的处理。

  • 在NSConnection的- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data代理方法中通过Image I/O进行图片解码处理,在这个方法里对图片的格式以及尺寸都做了处理,关于Image I/O详情见Image I/O;在图片加载处理完成后,会执行回调,将数据传递到SDWebImageDownloader,再由SDWebImageDownloader传递到SDWebImageManager,最终传递到视图对象中,将图片赋值到视图上,并将图片根据URL由SDImageCache缓存到Cache中。至此,整个图片加载赋值流程结束。

SD图片加载流程

SD图片加载流程
SD图片加载流程

总结

SDWebImage中有许多值得留意的点,以下列出几个。

线程保护

@synchronized(self)

建立一个互斥锁,保证不会再同时对self对象进行修改,通过此方法实现单例的时候,需要将allocWithZone和copy、mutableCopy等方法都进行重写,保证不会产生新的对象

NSOperation NSOperationQueue

网络加载图片会比较耗费时间,如果直接在主线程执行的话会导致界面卡顿的情况,所以必须在子线程进行网络加载,加载完成在主线程进行UI操作,平常的开发过程需要进入子线程操作的业务大多在第三方比如AFNetworking或者SDWebImage中封装好了,平时的开发会接触得少一点,但是一旦有这方面的需求,了解并熟练使用NSOperationNSOperationQueue以及GCD都是非常有必要的,关于这方面后面会总结一篇出来。

内存保护

__block __weak.

使用代码块时,注意使用__weak避免造成循环引用,使用__block使对象可以在代码块中改变。

参考

SDWebImage多线程防错乱策略
NSOperation并发编程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • SDWebImage是我们经常使用的第三方框架,但很多时候我们都是直接拿来用,在感受其方便快捷的同时,往往忽略其底...
    只敲代码不偷桃阅读 811评论 0 4
  • 前不久做了一个生成快照的需求,其中用到 SDWebImage 来下载图片,在使用该框架的过程中也遇到了一些问题,索...
    ShannonChenCHN阅读 13,965评论 12 241
  • SDWebImage[https://github.com/rs/SDWebImage] 分析 Version 4...
    wyanassert阅读 1,825评论 0 8
  • SDWebImage作为三方的图片处理框架、不仅可以加载显示图片、而且还是异步的不至于阻塞线程导致页面停滞卡顿、而...
    无意惹东风阅读 279评论 0 1
  • 一万次秋天的昏黄烧着头颅 犁过烈火的城邦 心还张开着 春天的欲望滋生每一道伤口 秋雷隐隐 圣光燎原 春雨沙沙 血雨倾城
    Zbou阅读 163评论 0 0