iOS圖片載入新架構 - FlyImage

標籤：

FlyImage 整合了SDWebImage，FastImageCache，AFNetworking的優點，是一個新的效能高效、介面簡單的圖片載入架構。

特點

• 高效

1. 可將多張小圖解碼後儲存到同一張大圖上，在同屏渲染多圖時，效率極高；

2. 支援mmap記憶體映射，高效的I/O操作，減少一次檔案拷貝操作，同時減少記憶體佔用；

3. 支援Byte Alignment位元組對其，渲染過程中，避免執行CA::Render::copy_image記憶體操作；

• 介面簡單

1. 支援UIImageView,CALayer Category；

2. 不用考慮小圖片尺寸，簡單的儲存和讀取介面；

3. 一套方案同時解決單張大圖和多張小圖的兩種業務情境；

• WebP 高效的圖片壓縮方式；

• 非同步下載 支援下載進度Block，方便實現自訂的下載動畫；

流行架構對比

現在iOS上比較流行的兩套圖片載入架構：

• SDWebImage提供了從下載到渲染一整套的解決方案，同時支援Category特性，WebP格式，使用起來非常簡單；但是同屏多張小圖快速滾動時，介面就會很明顯的卡頓；

• FastImageCache Path推出的，非常適合於小圖片的高效渲染，內部最佳化了I/O讀取，解碼時支援Byte Alignment減少記憶體拷貝，同時僅需一次解碼，可以說是做到了極度最佳化。但是FIC有兩大缺點：

• 為了精簡代碼，從1.2以後取消圖片下載功能；

• 介面非常難用，使用時還需要指定FICImageFormat，每個Format中的圖片size必須保持一致，同時每張圖片需要與[FICEntity綁定，我僅僅是想快速展示多個icon而已...

基於上述的分析，如果有一個圖片庫可以將兩者的優點結合在一起，那該多好！FlyImage就是基於此想法誕生的，新的庫整合了FastImageCache的最佳化方案，同時讓介面變得更加易用。

FlyImage可以在一個檔案中繪製多張不同size的小圖片，儲存和擷取時只需要一個固定的key；同時將記憶體映射的方法應用到大圖片的顯示方案中，減少記憶體的拷貝次數，加快讀取速度。具體的使用方法如下：

如何使用安裝

platform :ios, ‘8.0‘pod ‘FlyImage‘, ‘~>1.0‘

使用 UIImageView/CALayer

123	UIImageView *iconView = [[UIImageView alloc] initWithFrame:frame];[iconView setIconURL:[NSURL urlWithString:@"http://original"]];[]self.view addSubview:iconView];

使用 FlyImageCache

123456789

// 通過Key擷取單張圖片[[FlyImageCache sharedInstance] asyncGetImageWithKey:keycompleted:^(NSString *key, UIImage *image) {   imageView.image = image;}];// 刪除一張圖片[[FlyImageCache sharedInstance] removeImageWithKey:key];// 清除所有圖片[[FlyImageCache sharedInstance] purge];

使用 FlyImageIconCache

// 添加一張小圖[[FlyImageIconCache sharedInstance] addImageWithKey:key        size:drawSize        drawingBlock:^(CGContextRef context, CGRect contextBounds) {                        // 手動繪製          UIImage *image = [UIImage imageWithName:@"imageName"];                      UIGraphicsPushContext(context);          [image drawInRect:contextBounds];                      UIGraphicsPopContext();        }        completed:nil];        // 擷取一張小圖        [[FlyImageCache sharedInstance] asyncGetImageWithKey:key                    completed:^(NSString *key, UIImage *image) {        imageView.image = image;}];

效能Memory

測試工程: FlyImageView / Device: iPhone6 Plus，滾動列表中連續顯示多張大圖，FlyImage不會增加Image IO的記憶體

Memory	FlyImage	SDWebImage	UIKit
All Heap Allocations	2~7M	2~4M	2~5M
All Anonymous VM	17~30M	310M	17~30M

FPS

測試工程: FlyImageIconView / Device: iPhone6 Plus，同屏渲染170張小圖，FlyImage順滑的瀏覽體驗

FlyImage	SDWebImage	UIKit
58~60FPS	6~7FPS	6~7FPS

同屏多圖

類圖

• FlyImageDataFIle 封裝了mmap的操作，提供高效的I/O檔案操作，支援讀取、寫入、動態擴張檔案長度的功能。

• FlyImageDataFileManager 負責FlyImageDataFIle的增加、刪除和尋找。使用者不能直接執行個體化FlyImageDataFIle，而是需要通過Manager進行這些操作；同時可以擷取當前檔案夾下檔案的數量和佔用空間。

• FlyImageDecoder 解碼記憶體資料，並產生UIImage對象。WebP格式的轉換就在該類中完成。

• FlyImageEncoder 為FlyImageIconCache類服務，將圖片繪製到畫布上，產生bitmap格式。

• FlyImageCache 負責圖片的增加、刪除和尋找。每個圖片都對應一個key，這些資訊都會被儲存在一個meta檔案中。當該類被執行個體化後就會自動建立或自動擷取該meta檔案，可以指定不同的meta檔案路徑。在實際使用過程中，App會提供清除當前緩衝的操作，但是又想將一些必要的圖片保留，比如目前使用者的頭像和未發布的草稿圖片等，針對這個需求，FlyImageCache提供了便捷的介面- (void)protectFileWithKey:(NSString*)key;和- (void)unProtectFileWithKey:(NSString*)key;操作，處於protect狀態的圖片即使在執行purge操作時也不會被清除。

• FlyImageIconCache 負責小圖片的增加、刪除、替換和尋找。和FlyImageCache介面基本一致，只不過該類只維護一個FlyImageDataFIle案例，所有小圖片解碼後都會存放在該檔案中。當然你也可以建立多個執行個體，將經常一同使用的小圖片放在一個FlyImageDataFIle中。

• FlyImageDownloader 負責下載圖片，注意該類並不負責儲存。在發起一個下載請求後，會得到一個類型為FlyImageDownloadHandlerId的標識符，如果圖片被移出當前顯示地區後，可以調用- (void)cancelDownloadHandler:(FlyImageDownloadHandlerId*)handlerId;移除該下載請求，節省資源。

• UIImageView+FlyImageCache, CALayer+FlyImageCache 為UIImageView提供了便捷的分類介面`。

    - (void)setImageURL:(NSURL*)url;

• UIImageView+FlyImageIconCache, CALayer+FlyImageIconCache 為CALayer提供了便捷的分類介面`。

    - (void)setIconURL:(NSURL*)url;

原始碼

https://github.com/northwind/FlyImage ，歡迎大家測試並給予反饋，謝謝。

Reference

1. FastImageCache

2. SDWebImage

3. 認真分析mmap：是什麼 為什麼 怎麼用

4.  

iOS圖片載入新架構 - FlyImage