如何在iOS中高效的加載圖片詳解

Posted on by

前言

在iOS開發中，圖片(UIImage)是我們在開發中，占用手機內存比較大的對象，如果在運行過程中，內存占用過大，對電池壽命會造成影響，如果超過瞭內存占用的最大值，會造成App的crash。這篇文章從圖片的加載原理和SDWebImage的源碼實現的角度來介紹圖片加載。

圖片的渲染流程

在iOS中使用 UIImage和UIImageView來記載圖片，他倆遵守經典的MVC架構，UIImage相當於Model，UIImageView相當於View:

UIImage負責加載圖片，UIImageView負責渲染圖片。

圖片的渲染流程分為3個階段:加載(Load)，解碼（Decoder)和渲染(Render)

在每個階段都會有相對應的緩沖區:數據緩沖區(DataBuffer)，圖像緩沖區(imageBuffer)和幀緩沖區(framebuffer)。

我們以加載一個圖片的尺寸為:2048 px * 1536 px，在磁盤上的大小為:590kb的圖片為例，來分析前兩個階段的緩沖區。

DataBuffer

DataBuffer隻是一種包含一系列字節的緩沖區。通常以某些元數據開頭,元數據描述瞭存儲在數據緩沖區中的圖像大小，包含圖形數據本身，圖像數據以某種形式編碼 如 JPEG壓縮或PNG，這意味著，該字節並不直接描述圖像中像素的任何內容。此時的 DataBuffer大小為 590kb。

SD源碼分析

在SDWebImage中，圖片加載完成後，在 sd_imageFormatForImageData的方法中，是通過DataBuffer的第一個字節來判斷圖片的格式的。

    uint8_t c;
    [data getBytes:&c length:1];
    switch (c) {
        case 0xFF:
            return SDImageFormatJPEG;
        case 0x89:
            return SDImageFormatPNG;
        case 0x47:
            retur SDImageFormatGIF;
        case 0x49:
        case 0x4D:
            return SDImageFormatTIFF;
        
        ......
   }

ImageBuffer

在圖片加載完後，需要將Data Buffer的JPEG，PNG或其他編碼的數據，轉換為每個像素的圖像信息，這個過程，稱為Decoder(解碼)，將像素信息存放在ImageBuffer。

占用內存大小

圖片占用的內存大小與圖像的尺寸有關，與它的文件大小無關，在iOSSRGB顯示格式中(4byte空間顯示一個像素)，如果解析所有的像素，需要 2048 px * 1536 px * 4 byte/px = 10MB的空間，此時的 ImageBuffer的大小為10MB。

在ImageBuffer解析完後，提交給frameBuffer進行渲染顯示。

總的來說，圖片加載過程和消耗的內存如下圖所示：

Xcode測試

在Xcode工程中，當push新頁面的時候，隻加載一個圖片。

加載前內存值:

加載後內存值：

大多數情況下，我們並不需要如此高精度的顯示圖片，占用瞭這麼多的內存，能否減少加載圖片時占用的內存值呢?

如何減少圖像占用內存

向下采樣

在蘋果官方文檔中，建議我們使用向下采樣（Downsampleing)的技術，來加載圖片，減少ImageBuffer的大小。

方法如下：

func downsample(imageAt imageURL: URL, to pointSize:CGSize, scale:CGFloat) ->UIImage {
    let imageSourcesOptions = [kCGImageSourceShouldCache: false] as CFDictionary

    let imageSource = CGImageSourceCreateWithURL(imageURL as CFURL, imageSourcesOptions)!
    let maxDimensionInPixels = max(pointSize.width, pointSize.height) * scale
    let downsampleOptions = [
            kCGImageSourceCreateThumbnailFromImageAlways: true,
            kCGImageSourceShouldCacheImmediately: true,
            kCGImageSourceCreateThumbnailWithTransform: true,
            kCGImageSourceThumbnailMaxPixelSize:maxDimensionInPixels
        ] as CFDictionary
    let downsampledImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, downsampleOptions)!
    
    return UIImage(cgImage: downsampledImage)
 }

我們來測試一下:

   let imageStr = Bundle.main.path(forResource: "view_site.jpeg", ofType: nil)
   let imageURL =  URL(string: "file://" + (imageStr ?? ""))
   guard let imgURL = imageURL else {
       return
   }
   imageView.image = downsample(imageAt:imgURL , to: CGSize(width: 200, height: 200), scale: UIScreen.main.scale)

加載之前時是13M，加載之後是 17M，效果是很明顯的，節省瞭大約 5M的內存空間。

在對圖片進行壓縮時，我們應首選向下采樣技術。

SD源碼分析解碼過程

在SDWebIamge中，一共有3種類型的解碼器：SDImageIOCoder, SDImageGIFCoder, SDImageAPNGCoder，根據DataBuffer的編碼類型，使用相對應的編碼器。

在 -(UIImage *)decodedImageWithData:(NSData *)data方法中，配置解碼參數，開始進行解碼操作。

在 + (UIImage *)createFrameAtIndex:(NSUInteger)index source:(CGImageSourceRef)source scale:(CGFloat)scale preserveAspectRatio:(BOOL)preserveAspectRatio thumbnailSize:(CGSize)thumbnailSize options:(NSDictionary )options 中，完成圖像解碼

選擇正確的圖片渲染格式

渲染格式

在 iOS中，渲染圖片格式有4種

  • Alpha 8 Format:1字節顯示1像素，擅長顯示單色調的圖片。
  • Luminance and alpha 8 format: 亮度和 alpha 8 格式，2字節顯示1像素，擅長顯示有透明度的單色調圖片。
  • SRGB Format: 4個字節顯示1像素。
  • Wide Format: 廣色域格式，8個字節顯示1像素。適用於高精度圖片，

如何正確的選擇渲染格式

正確的思路是：不選擇渲染格式，讓渲染格式選擇你。

使用 UIGraphicsImageRender來替換UIGraphicsBeginImageContextWithOptions，前者在iOS12以後，會自動選擇渲染格式，後者默認都會選擇SRGB Format。

func render() -> UIImage{
   let bounds = CGRect(x: 0, y: 0, width: 300, height: 100)
   let render = UIGraphicsImageRenderer(size: bounds.size)
   let image = render.image { context in
       UIColor.blue.setFill()
           let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: 20, height: 20))
       path.addClip()
       UIRectFill(bounds)
    }
    return image
}

此時，系統為自動選擇Alpha 8 Format格式，內容空間占用，將會減少75%。

減少後備存儲器的使用

減少或者不使用 draw(rect:) 方法

在需要繪制帶有子視圖的View時，不使用 draw(rect:)方法，使用系統的View屬性或者添加子視圖的方式，將繪制工作交給系統來處理。

背景色直接通過UIView.backgroundColor設置，而非使用draw(rect:)

如何在列表中加載圖片

我們在開發中，一般會對圖片進行子線程異步加載，在後臺進行 解碼和下采樣。在列表中，有時會加載很多圖片，此時應該註意線程爆炸問題。

線程爆炸

當我們要求系統去做比CPU能夠做的工作更多的工作時就會發生這種情況，比如我們要顯示8張圖片，但我們隻有兩個CPU，就不能一次完成所有這些工作，無法在不存在的CPU上進行並行處理，為瞭避免向一個全局隊列中異步的分配任務時發生死鎖，GCD將創建新線程來捕捉我們要求它所做的工作，然後CPU將花費大量時間，在這些線程之間進行切換，嘗試在所有工作上取得我們要求操作系統為我們做的漸進式進展，在這些線程之間不停切換，實際上是相當大的開銷，現在不是簡單地將工作分派到全局異步隊列之一，而是創建一個串行隊列，在預取的方法中，異步的將工作分派到該隊列，它的確意味著單個圖像的加載，可能要比以前晚才能開始取得進展，但CPU將花費更少的時間，在它可以做的小任務之間來回切換。

在SDWebImage中，解碼的隊列  _coderQueue.maxConcurrentOperationCount = 1就是一個串行隊列。這樣就很好的解決瞭多圖片異步解碼時，線程爆炸問題。

總結

到此這篇關於如何在iOS中高效的加載圖片的文章就介紹到這瞭,更多相關iOS高效加載圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：