SDWebImage是一个网络图片下载和缓存的开源库(下载地址),它对图片的处理做了很好的封装,而且是线程安全的,你可以安心的让图片在后台线程下载并缓存起来。下面是一步步分解整个架构以及实现的思路,欢迎回复讨论!
一、图片下载
1.1、单个图片的下载(SDWebImageDownloaderOperation)
首先要从网络下载图片到本地,涉及到多个图片同时下载的问题,所以它把每个下载请求放入到队列中处理,每个下载任务当成一个operation,继承自NSOperation并重写start方法:


每个请求使用NSURLSession对象来实现,iOS7以前用的是NSURLConnection,关于这两个的区别可以参考这里。
接下来实现回调协议,获取图片数据,并且发相应的通知,这里它判断了response的304状态,意思是如果当前这个请求返回304,表明是重复请求没变化的数据,直接返回让上层直接读缓存数据

图片数据接收完成后,先转换二进制数据NSData为图片格式数据(CGImageSourceRef),关于CGImageSourceRef可以参考这里
//转换为CGImageSourceRef的图

获取到UIImage对象以后,先把图片数据存入缓存中,然后对图片进行拉伸以及加码处理,最后把处理过的图片通知上层,这样在后台线程解码,返回到主线程显示图片到屏幕上就可以节省时间

这就是完整的单个图片的下载流程!
1.2、下载队列
单个图片的下载被封装成了一个operation,就可以很方便的加入队列了。这样做的好处是不需要关心下载线程的管理、数据同步、并发等问题,只要把下载任务加入队列,后面就等着收数据,处理数据就好了。
队列只需要一个,而且属性配置应该也是一样的,所以这里创建一个下载队列以及全局的session对象,所有的下载都是用同一个配置config

当有url请求需要走下载流程的时候,传入url以及下载优先级和两个回调block:
SDWebImageDownloaderProgressBlock
SDWebImageDownloaderCompletedBlock

在这个方法内部先判断url有效性和是否重复,然后加入下载队列前,记录他们的回调block,方便后面下载数据返回时调用。

注意这里的GCD代码,它使用了一个同步方法来控制URLCallbacks这个属性,以确保线程安全。因为这个字典是可变数组,所有的回调block都在这个字典中,可能同一时间有的block被加入字典,同时另外的block正在被移除,所以需要每次操作字典的时候确保它没没有被使用(看下图中每次从字典中remove都会放在同步方法同一个barrierQueue中进行)


这就是下载队列部分的代码,下载任务加入队列会开始并发执行,当图片数据返回后,根据url作为key从URLCallbacks字典中找到对应的回调block来执行,调用层就能及时知道该图片的下载进度以及完成后刷新UI。
二、缓存图片
2.1、缓存分内存缓存memoryCache和磁盘缓存diskCache,前者是用NSCache对象来处理,后者用NSFileManager把图片保存在项目沙盒Caches目录下(Library/Caches)

保存的原则是先加入内存缓存,如果需要的话再加入磁盘缓存。磁盘缓存设计到图片格式的问题(不同格式保存的体积不同),这里它做了格式判断,避免因为格式被转化而造成透明度丢失。

它还做了一个自动清除过期图片的功能,保存期限是7天,每次app进入后台时,检查磁盘中图片文件的最近修改日期是否超过了期限,并将该缓存移除

还设置了缓存目录的大小限制,如果超出了最大容量限制,把最旧的文件删除

磁盘缓存是涉及到多线程的I/O操作,所以把所有的I/O操作都放入一个串行队列中,确保线程安全

2.2、查找缓存图片(先从内存查找,如果没找到,从磁盘找,还是没找到,走下载流程,一旦找到图片资源,加入内存缓存然后返回上层,在主线程刷新imageView)
//查找缓存图片图

三、管理类(SDWebImageManager)
用一个单例对象来管理和衔接所有这些功能点,也是整个框架流程的入口





四、Category
最后就是一些category,UI的封装供上层的业务逻辑使用。你也可以根据自己的业务需求去定义更多的扩展和封装,比如先显示placeholder啊,imageView在加载完成前先显示loading,按钮在图片返回前置为disable状态等等。它还对UIView做了一个扩展,利用runtime特性加了一个属性,主要就是把上面的combinedOperation这个管理整个流程的对象跟具体的UI对象绑定起来,并提供取消操作的扩展方法,这样所有的UIView子类都可以直接发送取消下载操作。
网友评论