探討iOS 中圖片的解壓縮到渲染過程

iOS_小賢發表於2019-03-12
iOS

一.影象從檔案到螢幕過程

image

通常計算機在顯示是CPU與GPU協同合作完成一次渲染.接下來我們瞭解一下CPU/GPU等在這樣一次渲染過程中,具體的分工是什麼?

  • CPU: 計算檢視frame，圖片解碼，需要繪製紋理圖片通過資料匯流排交給GPU
  • GPU: 紋理混合，頂點變換與計算,畫素點的填充計算，渲染到幀緩衝區。
  • 時鐘訊號：垂直同步訊號V-Sync / 水平同步訊號H-Sync。
  • iOS裝置雙緩衝機制：顯示系統通常會引入兩個幀緩衝區，雙緩衝機制

圖片顯示到螢幕上是CPU與GPU的協作完成

對應應用來說，圖片是最佔用手機記憶體的資源，將一張圖片從磁碟中載入出來，並最終顯示到螢幕上，中間其實經過了一系列複雜的處理過程。

二.圖片載入的工作流程

  1. 假設我們使用 +imageWithContentsOfFile: 方法從磁碟中載入一張圖片，這個時候的圖片並沒有解壓縮；

  2. 然後將生成的 UIImage 賦值給 UIImageView ；

  3. 接著一個隱式的 CATransaction 捕獲到了 UIImageView 圖層樹的變化；

  4. 在主執行緒的下一個 runloop 到來時，Core Animation 提交了這個隱式的 transaction ，這個過程可能會對圖片進行 copy 操作，而受圖片是否位元組對齊等因素的影響，這個 copy 操作可能會涉及以下部分或全部步驟：

    • 分配記憶體緩衝區用於管理檔案 IO 和解壓縮操作；
    • 將檔案資料從磁碟讀到記憶體中；
    • 將壓縮的圖片資料解碼成未壓縮的點陣圖形式，這是一個非常耗時的 CPU 操作；
    • 最後 Core Animation 中CALayer使用未壓縮的點陣圖資料渲染 UIImageView 的圖層。
    • CPU計算好圖片的Frame,對圖片解壓之後.就會交給GPU來做圖片渲染

  5. 渲染流程

    • GPU獲取獲取圖片的座標
    • 將座標交給頂點著色器(頂點計算)
    • 將圖片光柵化(獲取圖片對應螢幕上的畫素點)
    • 片元著色器計算(計算每個畫素點的最終顯示的顏色值)
    • 從幀快取區中渲染到螢幕上

我們提到了圖片的解壓縮是一個非常耗時的 CPU 操作，並且它預設是在主執行緒中執行的。那麼當需要載入的圖片比較多時，就會對我們應用的響應性造成嚴重的影響，尤其是在快速滑動的列表上，這個問題會表現得更加突出。

三.為什麼要解壓縮圖片

既然圖片的解壓縮需要消耗大量的 CPU 時間，那麼我們為什麼還要對圖片進行解壓縮呢？是否可以不經過解壓縮，而直接將圖片顯示到螢幕上呢？答案是否定的。要想弄明白這個問題，我們首先需要知道什麼是點陣圖

其實，點陣圖就是一個畫素陣列，陣列中的每個畫素就代表著圖片中的一個點。我們在應用中經常用到的 JPEG 和 PNG 圖片就是點陣圖

大家可以嘗試

UIImage *image = [UIImage imageNamed:@"text.png"];
CFDataRef rawData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));

複製程式碼

列印rawData,這裡就是圖片的原始資料.

事實上，不管是 JPEG 還是 PNG 圖片，都是一種壓縮的點陣圖圖形格式。只不過 PNG 圖片是無失真壓縮，並且支援 alpha 通道，而 JPEG 圖片則是有失真壓縮，可以指定 0-100% 的壓縮比。值得一提的是，在蘋果的 SDK 中專門提供了兩個函式用來生成 PNG 和 JPEG 圖片：

// return image as PNG. May return nil if image has no CGImageRef or invalid bitmap format
UIKIT_EXTERN NSData * __nullable UIImagePNGRepresentation(UIImage * __nonnull image);

// return image as JPEG. May return nil if image has no CGImageRef or invalid bitmap format. compression is 0(most)..1(least)                           
UIKIT_EXTERN NSData * __nullable UIImageJPEGRepresentation(UIImage * __nonnull image, CGFloat compressionQuality);

複製程式碼

因此，在將磁碟中的圖片渲染到螢幕之前，必須先要得到圖片的原始畫素資料，才能執行後續的繪製操作，這就是為什麼需要對圖片解壓縮的原因。

四.解壓縮原理

既然圖片的解壓縮不可避免，而我們也不想讓它在主執行緒執行，影響我們應用的響應性，那麼是否有比較好的解決方案呢？

我們前面已經提到了，當未解壓縮的圖片將要渲染到螢幕時，系統會在主執行緒對圖片進行解壓縮，而如果圖片已經解壓縮了，系統就不會再對圖片進行解壓縮。因此，也就有了業內的解決方案，在子執行緒提前對圖片進行強制解壓縮。

而強制解壓縮的原理就是對圖片進行重新繪製，得到一張新的解壓縮後的點陣圖。其中，用到的最核心的函式是 CGBitmapContextCreate ：

CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(void * __nullable data,
    size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
    CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)
    CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

複製程式碼
  • data ：如果不為 NULL ，那麼它應該指向一塊大小至少為 bytesPerRow * height 位元組的記憶體；如果 為 NULL ，那麼系統就會為我們自動分配和釋放所需的記憶體，所以一般指定 NULL 即可；
  • width 和height ：點陣圖的寬度和高度，分別賦值為圖片的畫素寬度和畫素高度即可；
  • bitsPerComponent ：畫素的每個顏色分量使用的 bit 數，在 RGB 顏色空間下指定 8 即可；
  • bytesPerRow ：點陣圖的每一行使用的位元組數，大小至少為 width * bytes per pixel 位元組。當我們指定 0/NULL 時，系統不僅會為我們自動計算，而且還會進行 cache line alignment 的優化
  • space ：就是我們前面提到的顏色空間，一般使用 RGB 即可；
  • bitmapInfo ：點陣圖的佈局資訊.kCGImageAlphaPremultipliedFirst

五.YYImage\SDWebImage開源框架實現

  • 用於解壓縮圖片的函式 YYCGImageCreateDecodedCopy 存在於 YYImageCoder 類中，核心程式碼如下
CGImageRef YYCGImageCreateDecodedCopy(CGImageRef imageRef, BOOL decodeForDisplay) {
    ...

    if (decodeForDisplay) { // decode with redraw (may lose some precision)
        CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef) & kCGBitmapAlphaInfoMask;

        BOOL hasAlpha = NO;
        if (alphaInfo == kCGImageAlphaPremultipliedLast ||
            alphaInfo == kCGImageAlphaPremultipliedFirst ||
            alphaInfo == kCGImageAlphaLast ||
            alphaInfo == kCGImageAlphaFirst) {
            hasAlpha = YES;
        }

        // BGRA8888 (premultiplied) or BGRX8888
        // same as UIGraphicsBeginImageContext() and -[UIView drawRect:]
        CGBitmapInfo bitmapInfo = kCGBitmapByteOrder32Host;
        bitmapInfo |= hasAlpha ? kCGImageAlphaPremultipliedFirst : kCGImageAlphaNoneSkipFirst;

        CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, YYCGColorSpaceGetDeviceRGB(), bitmapInfo);
        if (!context) return NULL;

        CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef); // decode
        CGImageRef newImage = CGBitmapContextCreateImage(context);
        CFRelease(context);

        return newImage;
    } else {
        ...
    }
}

複製程式碼

它接受一個原始的點陣圖引數 imageRef ，最終返回一個新的解壓縮後的點陣圖 newImage ，中間主要經過了以下三個步驟：

  • 使用 CGBitmapContextCreate 函式建立一個點陣圖上下文；
  • 使用 CGContextDrawImage 函式將原始點陣圖繪製到上下文中；
  • 使用 CGBitmapContextCreateImage 函式建立一張新的解壓縮後的點陣圖。

事實上，SDWebImage 中對圖片的解壓縮過程與上述完全一致，只是傳遞給 CGBitmapContextCreate 函式的部分引數存在細微的差別

效能對比:

  • 在解壓PNG圖片,SDWebImage>YYImage
  • 在解壓JPEG圖片,SDWebImage<YYImage

總結

  1. 圖片檔案只有在確認要顯示時,CPU才會對齊進行解壓縮.因為解壓是非常消耗效能的事情.解壓過的圖片就不會重複解壓,會快取起來.

  2. 圖片渲染到螢幕的過程: 讀取檔案->計算Frame->圖片解碼->解碼後紋理圖片點陣圖資料通過資料匯流排交給GPU->GPU獲取圖片Frame->頂點變換計算->光柵化->根據紋理座標獲取每個畫素點的顏色值(如果出現透明值需要將每個畫素點的顏色*透明度值)->渲染到幀快取區->渲染到螢幕

  3. 面試中如果能按照這個邏輯闡述,應該沒有大的問題.不過,如果細問到離屏渲染和渲染中的細節處理.就需要掌握OpenGL ES/Metal 這個2個圖形處理API. 面試過程可能會遇到不在自己技術能力範圍問題,儘量知之為知之不知為不知.

github.com/SDWebImage/…

github.com/ibireme/YYI…

相關文章