iOS圖片載入架構－SDWebImage解讀

標籤：緩衝   多個   一個   能力   具體細節   錯誤   ons   option   nec   

在iOS的圖片載入架構中，SDWebImage可謂是佔據大半壁江山。它支援從網路中下載且緩衝圖片，並設定圖片到對應的UIImageView控制項或者UIButton控制項。在項目中使用SDWebImage來管理圖片載入相關操作可以極大地提高開發效率，讓我們更加專註於商務邏輯實現。

SDWebImage 概論

1.提供了一個UIImageView的category用來載入網狀圖片並且對網狀圖片的緩衝進行管理
2.採用非同步方式來下載網狀圖片
3.採用非同步方式，使用memory＋disk來緩衝網狀圖片，自動管理緩衝。
4.支援GIF動畫
5.支援WebP格式
6.同一個URL的網狀圖片不會被重複下載
7.失效的URL不會被無限重試
8.耗時操作都在子線程，確保不會阻塞主線程
9.使用GCD和ARC
10.支援Arm64

SDWebImage 使用

1.使用IImageView+WebCache category來載入UITableView中cell的圖片

[cell.imageView sd_setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"] placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

2.使用Blocks,採用這個方案可以在網狀圖片載入過程中得知圖片的下載進度和圖片載入成功與否

[cell.imageView sd_setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"] placeholderImage:[UIImage imageNamed:@"placeholder.png"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {    //... completion code here ...  }];

3.使用SDWebImageManager,SDWebImageManager為UIImageView+WebCache category的實現提供介面。

SDWebImageManager *manager = [SDWebImageManager sharedManager] ;[manager downloadImageWithURL:imageURL options:0 progress:^(NSInteger   receivedSize, NSInteger expectedSize) {       // progression tracking code }  completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType,   BOOL finished, NSURL *imageURL) {    if (image) {     // do something with image   } }];

4.載入圖片還有使用SDWebImageDownloader和SDImageCache方式，但那個並不是我們經常用到的。基本上面所講的3個方法都能滿足需求。

SDWebImage 流程
UIImageView的圖片載入流程SDWebImage 介面

SDWebImage是一個成熟而且比較龐大的架構，但是在使用過程中並不需要太多的介面,這算是一種代碼封裝程度的體現。這裡就介紹比較常用的幾個介面。

1. 給UIImageView設定圖片的介面，SDWebImage有提供多個給UIImageView設定圖片的介面，最終所有的介面都會調用的這個介面，這是大多數架構的做法。

   
   給UIImageView設定圖片的介面

2. 擷取SDWebImage的磁碟緩衝大小,在項目中有時候會需要統計應用的磁碟緩衝內容大小，那麼擷取圖片的緩衝大小就是使用這個介面來實現

   [SDImageCache sharedImageCache] getSize];

3. 清理記憶體緩衝，清理記憶體中緩衝的圖片資源，釋放記憶體資源。

   [[SDImageCache sharedImageCache] clearMemory];

4. 有了清理記憶體緩衝，自然也有清理磁碟緩衝的介面

   [[SDImageCache sharedImageCache] clearDisk];

SDWebImage 解析

解析主要圍繞著SDWebImage的圖片載入流程來分析，介紹SDWebImage這個架構載入圖片過程中的一些處理方法和設計思路。

1. 給UIImageView設定圖片，然後SDWebImage調用這個最終的圖片載入方法。

   
   1 給UIImageView設定圖片

2. 開始載入之前圖片先取消對應的UIImageView先前的圖片下載操作。試想，如果我們給UIImageView設定了一張新的圖片，那麼我們還會在意該UIImageVIew先前是要載入哪一張圖片嗎？應該是不在意的吧！那是不是應該嘗試把該UIImageView先前的載入圖片相關操作給取消掉呢。

    [self sd_cancelCurrentImageLoad]

   
   
   2 取消對應的UIImageView先前的圖片下載操作

該方法經過周轉，最後調用了以下方法，架構將圖片對應的下載操作放到UIView的一個自訂字典屬性(operationDictionary)中，取消下載操作第一步也是從這個UIView的自訂字典屬性(operationDictionary)中取出所有的下載操作，然後依次調用取消方法，最後將取消的操作從(operationDictionary)字典屬性中移除。

最終的取消下載方法

3.移除之前沒用的圖片下載操作之後就建立一個新的圖片下載操作，然後設定到UIView的一個自訂字典屬性(operationDictionary)中。

3 建立一個新的圖片下載操作

4.看看如何建立一個新的圖片下載操作,架構儲存了一個失效的URL列表，如果URL失效了就會被加入這個列表，保證不會重複多次請求失效的URL。

4 圖片下載操作

根據給定的URL產生一個唯一的Key,之後利用這個key到緩衝中尋找對應的圖片緩衝。

尋找圖片緩衝

5.讀取圖片緩衝,根據key先從記憶體中讀取圖片緩衝，若沒有命中記憶體緩衝則讀取磁碟緩衝，如果磁碟快取命中，那麼將磁碟緩衝讀到記憶體中成為記憶體緩衝。如果都沒有命中緩衝的話，那麼就在執行的doneBlock中開始下載圖片。

5 讀取圖片緩衝

6.圖片下載操作完成後會將圖片對應的資料通過completed Block進行回調

6 圖片下載操作

在圖片下載方法中，調用了一個方法用於添加建立和下載過程中的各類Block回調。

圖片下載方法

添加該URL載入過程的狀態回調Block

狀態回調Block

如果該URL是第一次載入的話，那麼就會執行createCallback這個回調Block,然後在createCallback裡面開始構建網路請求，在下載過程中執行各類進度Block回調。

構建網路請求

7.當圖片下載完成之後會回到done的Block回調中做圖片轉換處理和快取作業

7 圖片轉換處理和快取作業

回到UIImageView控制項的設定圖片方法Block回調中，給對應的UIImageView設定圖片，操作流程到此完成。

Block中設定圖片總結

SDWebImage作為一個優秀的圖片載入架構，提供的使用方法和介面對開發人員來說非常友好。其內部實現多是採用Block的方式來實現回調，代碼閱讀起來可能沒有那麼直觀。此文章旨在給大家講解SDWebImage這個架構的圖片大概載入流程，其中具體細節限於篇幅無法詳細深究。本人能力有限，文章中難免有錯誤，若大家在閱讀過程中有發現不合理或者錯誤的地方懇請在評論中指出，我會在第一時間進行修正,不勝感激。

若是本文章對你起了一定的作用，請在下方中點個贊，讓我知道這文章起了它應該起的作用，也算是對我的辛苦碼字的鼓勵吧，哈哈！

==========================================
評論中有一位朋友想瞭解關於304的處理，我這裡補充說明下。

SDWebImage在載入圖片網路請求的NSURLConnection的代理中對httpCode 做了判斷，當httpCode為304的時候放棄下載，讀取緩衝。

304處理

要上班的斌哥
連結：http://www.jianshu.com/p/be9a0a088feb
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

iOS圖片載入架構－SDWebImage解讀