在iOS開發(fā)中，圖片(UIImage)是我們在開發(fā)中抓督，占用手機(jī)內(nèi)存比較大的對象，如果在運(yùn)行過程中束亏，內(nèi)存占用過大铃在，對電池壽命會造成影響，如果超過了內(nèi)存占用的最大值碍遍，會造成App的crash定铜。這篇文章從圖片的加載原理和SDWebImage的源碼實現(xiàn)的角度來介紹圖片加載。

圖片的渲染流程

在iOS中使用 UIImage和UIImageView來記載圖片怕敬，他倆遵守經(jīng)典的MVC架構(gòu)揣炕，UIImage相當(dāng)于Model，UIImageView相當(dāng)于View:

UIImage負(fù)責(zé)加載圖片赖捌，UIImageView負(fù)責(zé)渲染圖片祝沸。

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

如果你正在面試越庇，或者正準(zhǔn)備跳槽罩锐，不妨看看我精心總結(jié)的面試資料：https://gitee.com/Mcci7/i-oser 來獲取一份詳細(xì)的大廠面試資料 為你的跳槽加薪多一份保障

在每個階段都會有相對應(yīng)的緩沖區(qū):數(shù)據(jù)緩沖區(qū)(DataBuffer)，圖像緩沖區(qū)(imageBuffer)和幀緩沖區(qū)(framebuffer)卤唉。

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

DataBuffer

DataBuffer只是一種包含一系列字節(jié)的緩沖區(qū)竭恬。通常以某些元數(shù)據(jù)開頭,元數(shù)據(jù)描述了存儲在數(shù)據(jù)緩沖區(qū)中的圖像大小，包含圖形數(shù)據(jù)本身熬的，圖像數(shù)據(jù)以某種形式編碼 如 JPEG壓縮或PNG痊硕，這意味著，該字節(jié)并不直接描述圖像中像素的任何內(nèi)容押框。此時的 DataBuffer大小為 590kb岔绸。

SD源碼分析

在SDWebImage中，圖片加載完成后，在 sd_imageFormatForImageData的方法中盒揉，是通過DataBuffer的第一個字節(jié)來判斷圖片的格式的晋被。

    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;

        ......
   }
復(fù)制代碼

ImageBuffer

在圖片加載完后，需要將Data Buffer的JPEG刚盈，PNG或其他編碼的數(shù)據(jù)羡洛，轉(zhuǎn)換為每個像素的圖像信息，這個過程藕漱，稱為Decoder(解碼)欲侮，將像素信息存放在ImageBuffer。

占用內(nèi)存大小

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

在ImageBuffer解析完后沙兰，提交給frameBuffer進(jìn)行渲染顯示氓奈。

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

Xcode測試

在Xcode工程中鼎天，當(dāng)push新頁面的時候舀奶，只加載一個圖片。

加載前內(nèi)存值:

加載后內(nèi)存值：

大多數(shù)情況下斋射，我們并不需要如此高精度的顯示圖片育勺，占用了這么多的內(nèi)存，能否減少加載圖片時占用的內(nèi)存值呢?

如何減少圖像占用內(nèi)存

向下采樣

在蘋果官方文檔中罗岖，建議我們使用向下采樣（Downsampleing)的技術(shù)涧至，來加載圖片，減少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)
 }
復(fù)制代碼

我們來測試一下:

   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)
復(fù)制代碼

加載之前時是13M南蓬，加載之后是 17M，效果是很明顯的哑了，節(jié)省了大約 5M的內(nèi)存空間赘方。

在對圖片進(jìn)行壓縮時，我們應(yīng)首選向下采樣技術(shù)弱左。

SD源碼分析解碼過程

在SDWebIamge中窄陡，一共有3種類型的解碼器：SDImageIOCoder, SDImageGIFCoder, SDImageAPNGCoder，根據(jù)DataBuffer的編碼類型拆火，使用相對應(yīng)的編碼器跳夭。

在 -(UIImage *)decodedImageWithData:(NSData *)data方法中鳖悠，配置解碼參數(shù)，開始進(jìn)行解碼操作优妙。

在 + (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字節(jié)顯示1像素套硼，擅長顯示單色調(diào)的圖片。
• Luminance and alpha 8 format: 亮度和 alpha 8 格式胞皱，2字節(jié)顯示1像素邪意，擅長顯示有透明度的單色調(diào)圖片。
• SRGB Format: 4個字節(jié)顯示1像素反砌。
• Wide Format: 廣色域格式雾鬼，8個字節(jié)顯示1像素。適用于高精度圖片宴树，

如何正確的選擇渲染格式

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

使用 UIGraphicsImageRender來替換UIGraphicsBeginImageContextWithOptions酒贬，前者在iOS12以后又憨，會自動選擇渲染格式，后者默認(rèn)都會選擇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
}
復(fù)制代碼

此時蠢莺，系統(tǒng)為自動選擇Alpha 8 Format格式，內(nèi)容空間占用零如，將會減少75%躏将。

減少后備存儲器的使用

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

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

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

如何在列表中加載圖片

我們在開發(fā)中夺衍，一般會對圖片進(jìn)行子線程異步加載，在后臺進(jìn)行 解碼和下采樣喜命。在列表中沟沙，有時會加載很多圖片，此時應(yīng)該注意線程爆炸問題壁榕。

線程爆炸

當(dāng)我們要求系統(tǒng)去做比CPU能夠做的工作更多的工作時就會發(fā)生這種情況矛紫，比如我們要顯示8張圖片，但我們只有兩個CPU牌里，就不能一次完成所有這些工作颊咬，無法在不存在的CPU上進(jìn)行并行處理务甥，為了避免向一個全局隊列中異步的分配任務(wù)時發(fā)生死鎖，GCD將創(chuàng)建新線程來捕捉我們要求它所做的工作喳篇，然后CPU將花費(fèi)大量時間敞临，在這些線程之間進(jìn)行切換，嘗試在所有工作上取得我們要求操作系統(tǒng)為我們做的漸進(jìn)式進(jìn)展麸澜，在這些線程之間不停切換挺尿，實際上是相當(dāng)大的開銷，現(xiàn)在不是簡單地將工作分派到全局異步隊列之一炊邦，而是創(chuàng)建一個串行隊列编矾，在預(yù)取的方法中，異步的將工作分派到該隊列馁害，它的確意味著單個圖像的加載窄俏，可能要比以前晚才能開始取得進(jìn)展，但CPU將花費(fèi)更少的時間碘菜，在它可以做的小任務(wù)之間來回切換凹蜈。

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

作者：Bel李玉
鏈接：https://juejin.cn/post/7019623908500324389