SDWebImage原理小結

碼鋒窩發表於2016-07-28
Web
先貼上github上的地址：https://github.com/rs/SDWebImage，至於安裝方式這裡就不多說了，它的框架說明中都有，不過建議使用cocoaPod來安裝比較好，方便日後的維護程式碼，廢話少說，進入正題。

首先，這個類庫提供一個UIImageView類別以支援載入來自網路的遠端圖片。具有快取管理、非同步下載、同一個URL下載次數控制和優化等特徵。

SDWebImage 載入圖片的流程

  1. 入口 setImageWithURL:placeholderImage:options: 會先把 placeholderImage（佔點陣圖） 顯示，然後 SDWebImageManager 根據 URL 開始處理圖片。
  2. 進入 SDWebImageManager-downloadWithURL:delegate:options:userInfo:，交給 SDImageCache 從快取查詢圖片是否已經下載 queryDiskCacheForKey:delegate:userInfo:.
  3. 先從記憶體圖片快取查詢是否有圖片，如果記憶體中已經有圖片快取，SDImageCacheDelegate 回撥 imageCache:didFindImage:forKey:userInfo: 到 SDWebImageManager。
  4. SDWebImageManagerDelegate 回撥 webImageManager:didFinishWithImage: 到 UIImageView+WebCache 等前端展示圖片。
  5. 如果記憶體快取中沒有，生成 NSInvocationOperation 新增到佇列開始從硬碟查詢圖片是否已經快取。
  6. 根據 URLKey 在硬碟快取目錄下嘗試讀取圖片檔案。這一步是在 NSOperation 進行的操作，所以回主執行緒進行結果回撥 notifyDelegate:。
  7. 如果上一操作從硬碟讀取到了圖片，將圖片新增到記憶體快取中（如果空閒記憶體過小，會先清空記憶體快取）。SDImageCacheDelegate 回撥 imageCache:didFindImage:forKey:userInfo:。進而回撥展示圖片。
  8. 如果從硬碟快取目錄讀取不到圖片，說明所有快取都不存在該圖片，需要下載圖片，回撥 imageCache:didNotFindImageForKey:userInfo:。
  9. 共享或重新生成一個下載器 SDWebImageDownloader 開始下載圖片。
  10. 圖片下載由 NSURLConnection 來做，實現相關 delegate 來判斷圖片下載中、下載完成和下載失敗。
  11. connection:didReceiveData: 中利用 ImageIO 做了按圖片下載進度載入效果。
  12. connectionDidFinishLoading: 資料下載完成後交給 SDWebImageDecoder 做圖片解碼處理。
  13. 圖片解碼處理在一個 NSOperationQueue 完成，不會拖慢主執行緒 UI。如果有需要對下載的圖片進行二次處理，最好也在這裡完成，效率會好很多。
  14. 在主執行緒 notifyDelegateOnMainThreadWithInfo: 宣告解碼完成，imageDecoder:didFinishDecodingImage:userInfo: 回撥給 SDWebImageDownloader。
  15. imageDownloader:didFinishWithImage: 回撥給 SDWebImageManager 告知圖片下載完成。
  16. 通知所有的 downloadDelegates 下載完成，回撥給需要的地方展示圖片。
  17. 將圖片儲存到 SDImageCache 中，記憶體快取和硬碟快取同時儲存。寫檔案到硬碟也在以單獨 NSInvocationOperation 完成，避免拖慢主執行緒。
  18. SDImageCache 在初始化的時候會註冊一些訊息通知，在記憶體警告或退到後臺的時候清理記憶體圖片快取，應用結束的時候清理過期圖片。
  19. SDWI 也提供了 UIButton+WebCache 和 MKAnnotationView+WebCache，方便使用。
  20. SDWebImagePrefetcher 可以預先下載圖片，方便後續使用

SDWebImage庫的作用

通過對UIImageView的類別擴充套件來實現非同步載入替換圖片的工作。

 
主要用到的物件：
1、UIImageView (WebCache)類別，入口封裝，實現讀取圖片完成後的回撥
2、SDWebImageManager，對圖片進行管理的中轉站，記錄那些圖片正在讀取。
向下層讀取Cache（呼叫SDImageCache），或者向網路讀取物件（呼叫SDWebImageDownloader） 。
實現SDImageCache和SDWebImageDownloader的回撥。
3、SDImageCache，根據URL的MD5摘要（這裡的url作為一個使用MD5來加密的key值來判斷圖片的存在與否）對圖片進行儲存和讀取（實現存在記憶體中或者存在硬碟上兩種實現）
實現圖片和記憶體清理工作。
4、SDWebImageDownloader，根據URL向網路讀取資料（實現部分讀取和全部讀取後再通知回撥兩種方式）

其他類：
SDWebImageDecoder，非同步對影像進行了一次解壓⋯⋯

 
 
兩個常見問題：
1、SDImageCache是怎麼做資料管理的?
SDImageCache分兩個部分，一個是記憶體層面的，一個是硬碟層面的。
記憶體層面的相當是個快取器，以Key-Value的形式儲存圖片。當記憶體不夠的時候會清除所有快取圖片。
用搜尋檔案系統的方式做管理，檔案替換方式是以時間為單位，剔除時間大於一週的圖片檔案。
當SDWebImageManager向SDImageCache要資源時，先搜尋記憶體層面的資料，如果有直接返回，沒有的話去訪問磁碟，將圖片從磁碟讀取出來，然後做Decoder，將圖片物件放到記憶體層面做備份，再返回撥用層。
 
2、為啥必須做Decoder?
由於UIImage的imageWithData函式是每次畫圖的時候才將Data解壓成ARGB的影像
所以在每次畫圖的時候，會有一個解壓操作，這樣效率很低，但是隻有瞬時的記憶體需求。
為了提高效率通過SDWebImageDecoder將包裝在Data下的資源解壓，然後畫在另外一張圖片上，這樣這張新圖片就不再需要重複解壓了。
SDWebImage的簡單用法
1.載入GIF圖
- (void)loadGIF
{
    NSURL *URL;

    // 載入網路gif圖
    URL = [NSURL URLWithString:@"http://image.nihaowang.com/news/2015-04-27/c30f866d-9300-4f6e-86f6-58f408630e14.gif"];

    // 載入本地gif圖
//   URL = [[NSBundle mainBundle] URLForResource:@"money.gif" withExtension:nil];

    [self.imgView sd_setImageWithURL:URL];
}
2.監聽圖片下載進度
- (void)loadProgress
{
    NSURL *URL = [NSURL URLWithString:@"http://pic1.nipic.com/2008-11-13/2008111384358912_2.jpg"];

    [self.imgView sd_setImageWithURL:URL placeholderImage:nil options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {

        // receivedSize : 接收的圖片大小
        // expectedSize : 圖片的總大小

        float progress = (float)receivedSize / expectedSize;

        NSLog(@"%zd %zd %f",receivedSize,expectedSize,progress);

    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        NSLog(@"圖片下載完成 %@",image);
    }];
}
3.Manager下載圖片
- (void)LoadImageWithManager
{
    NSURL *URL = [NSURL URLWithString:@"http://pic37.nipic.com/20140209/8821914_163234218136_2.jpg"];

    [[SDWebImageManager sharedManager] downloadImageWithURL:URL options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
        // receivedSize : 接收的圖片大小
        // expectedSize : 圖片的總大小

        float progress = (float)receivedSize / expectedSize;

        NSLog(@"%zd %zd %f",receivedSize,expectedSize,progress);
    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
        self.imgView.image = image;
    }];
}
參考：http://www.cnblogs.com/jys509/p/5199997.html
總結得比較簡單，要是日後專案使用發掘什麼好玩好用的，後面再續上總結。
 

相關文章