雲音樂iOS端網路圖片下載優化實踐

語言: CN / TW / HK

圖片來自:https://unsplash.com

本文作者: lgq

背景

圖片展示,在各大APP中不可或缺,眾所周知雲音樂是一款帶有社交屬性的音樂軟體,那麼在任何社交場景,都會有展示圖片的訴求,並且常常會有重圖片場景,比如一個雲音樂中Mlog的Feed流場景全都是圖片,或者就是Mlog中的圖集,都需要展示大量的圖片,要是圖片無法及時的展示出來,不能及時的被使用者消費,那麼會造成使用者瀏覽資訊不順暢,導致使用者的流失,因此優化圖片下載迫在眉睫。

現有圖片下載技術

這裡簡單瞭解下雲音樂APP中接入的圖片資源服務,它可以通過拼接引數,在遠端進行裁剪,質量壓縮從而下載到不同的圖片。更多資訊參考

影響圖片下載的因素

  1. 圖片大小
  2. 網路情況
  3. 本地快取
  4. cdn快取

綜上所述,如何提高圖片的下載速度可以從上面幾點開始優化。

優化方式

網路優化

  • 傳統 HTTP1.0 的架構下沒法多路複用,採用 HTTP2.0 的方式,請求同一ip域名的資源可以從節省大量建連及傳輸時間。
  • 除此之外筆者在做音視訊場景較重的頁面時,發現音視訊流媒體的資料有時候會搶佔大量頻寬,導致圖片下載非常的慢,這時需要對音視訊場景資源下載做適當的控制,如限流等操作,具體看業務優先順序。如音視訊場景使用socket下載時可以適當調中recv buffer 大小。

圖片大小優化

  • 格式優化

    這是最容易想的到的也是最有效的,如果正常使用jpg,png等常規圖片,那圖片的大小會是比較大的,目前我們的nos服務支援指定型別,將圖片轉成特定的格式,所以我們這裡使用webp,從而減少圖片的大小。(只需要在請求引數中拼接型別為webp即可)

那除此之外呢,我們還可以做一些什麼?

  • 按需裁剪
    比如一個 100 100 的控制元件,3 倍屏的情況下,我們只需要下載 300 300 的圖就可以了,如果圖片超過個尺寸,我們去下載那麼大的也沒有意義。所以根據控制元件大小,可以決定我們下的圖片大小,從而減小我們所需下載的圖片。
  • 壓縮質量
    比如要求沒有那麼高的場景我們只需要質量為 80 的圖就可以了。

思考

以上幾項做完,我們可以發現速度至少提升 30%,但是是不是可以做的更多,或者這個方案有什麼紕漏?

取證

為此我們簡單的拉取了一下後臺資料。發現有以下問題:

  1. URL拼接的引數不同,導致無法命中本地快取,這樣會有重複下載的問題,比如使用者頭像,使用者頭像再各個場景重複出現,而且大小不一,會下載多次這樣會導致一定的資源浪費。同時由於連結引數各異 cdn命中度不高
  2. 不同機型的UI尺寸大小可能不太一致,導致下載的片尺寸會不一樣,機型種類越多,拼接的尺寸情況也越多,服務端需要重複裁剪。
  3. 質量引數由上層業務自行決定,會導致不同端沒有約定好,下載到各式各樣的圖片

解決手段

  1. URL 引數標準化
    所謂的標準化是規範大前端使用的引數拼接,分為順序標準化,引數值擬合。
    我們知道一個下載圖片的URL連結 http://path?imageView=1&enlarge=1&quality=80&thumbnail=80x80&type=webp
  2. 其中引數我們按首字母排序,這樣在引數要求一致的情況下,不會出現重複請求。
  3. thumbnail 引數其實對應的是需要下載的圖片大小,我們做擬合(根據後端統計的到的資料),分成多檔(檔位可以配置),按照寬邊對其等比例縮放,這樣可以儘可能少的避免機型螢幕差一點點,出現了其他size的case。
  4. quality也同樣分級,分成多檔(檔位可以配置)。
  5. 去重,引數可能多拼接,對冗餘引數去重複
  6. 本地大小圖片重用
    簡單理解是本地有大圖,取小圖的時候無需額外網路請求,直接本地裁剪。
    我們優化了讀取本地快取的邏輯,在取快取的時候,我們會進行關聯查詢,找到可用的圖片進行裁剪,直接返回。
    具體規則如下:
  7. 不同裁剪引數可以轉化,x,z裁剪引數可以轉為y,y不可以轉x,z。都可以轉為相同的裁剪引數。其中x(內縮略),y(裁剪縮略),z(外縮略)的含義在本篇文件中有,代表著不同的填充模式。
  8. 質量高的圖片可以複用為質量低的圖片,質量低的圖片不可以複用為質量高的圖片

iOS 程式碼實現

說完了方案之後,我們可以上程式碼了,這裡是 iOS的實現方案:

首先我們是基於SDWebImage進行一定的封裝,先簡單瞭解下SDWebImage中大概的流程。

從圖中我們可以看出,下載圖片主要是使用了imageLoader,查詢快取這裡是用了imageCache,這兩個都在manager中被管理

改造流程

我們只需要在資料流轉的最開始對URL進行Fix,同時在查詢快取的時候對圖片增加額外查詢即可。

URL FIX

我們給URL增加一個分類,對URL進行一個fix操作,方案就是用系統提供的 NSURLComponts 對齊進行操作,提取出他的引數,進行去重,標準化,同時我們有一些歷史原因,一些老的引數將其轉為正確的格式,最後一步進行排序,fix流程就完成了。

- (NSURL *)demo_fixImageURL {

    NSURLComponts *componts = [NSURLComponts compontsWithURL:self
                                             resolvingAgainstBaseURL:YES];
    NSMutableArray<NSURLQueryItem *> *queryItems = componts.queryItems.mutableCopy;

    ... 從URL取出 NSURLQueryItem 省略一些程式碼

    if (qualityItem) {
        //quality 擬合, 將質量引數分為幾檔
        NSString *defaultQualityStr = @"39,69,89";

        //這裡是虛擬碼,就是為了獲取配置資訊
        NSArray<NSString *> *qualityLevel = CustomConfigQualityLevels;

        //固定 4檔
        if (qualityLevel.count == 3) {
            NSInteger quality = [qualityItem.value intValue];
            NSString *fixQuality = @"";
            if (quality <= [[qualityLevel _objectAtIndex:0] intValue]) {
                fixQuality = [@(ImageQualityLevelLow) stringValue];
            } else if (quality <= [[qualityLevel _objectAtIndex:1] intValue]) {
                fixQuality = [@(ImageQualityLevelMed) stringValue];
            } else if (quality <= [[qualityLevel _objectAtIndex:2] intValue]) {
                fixQuality = [@(ImageQualityLevelHigh) stringValue];
            } else {
                fixQuality = [@(ImageQualityLevelOrigin) stringValue];
            }
            NSURLQueryItem *fixQualityItem = [[NSURLQueryItem alloc] initWithName:@"quality" value:fixQuality];
            [queryItems removeObject:qualityItem];
            [queryItems addObject:fixQualityItem];
        }
    }

    if (sizeItem) {
        //size 按照寬邊擬合 分為幾檔且 等比縮放
        NSString *defaultSizeStr = @"30,60,90,120,180,256,315,512,720,1024";

        //這裡是虛擬碼 就是為了獲取配置資訊
        NSArray<NSString *> *sizeLevels = CustomConfigSizeLevels;
        NSString *originSizeStr = sizeItem.value;

        CGSize originSize = CGSizeZero;

        NSString *separatedStr = nil;
        for (NSString *separated in @[@"x", @"z", @"y"]) {
            NSArray *sizeList = [originSizeStr compontsSeparatedByString:separated];
            if (sizeList.count == 2) {
                originSize = CGSizeMake([sizeList[0] intValue], [sizeList[1] intValue]);
                separatedStr = separated;
                break;
            }
        }

        CGSize finalSize = CGSizeZero;
        if (!CGSizeEqualToSize(originSize, CGSizeZero)) {
            BOOL isW = originSize.width > originSize.height;
            NSInteger len = isW ? originSize.width : originSize.height;
            NSInteger requestSize = 0;
            for (NSString *sizeLevel in sizeLevels) {
                NSInteger sizeNumber = [sizeLevel integerValue];
                if (sizeNumber >= len) {
                    if (requestSize == 0) {
                        requestSize = sizeNumber;
                    } else {
                        requestSize = MIN(requestSize, sizeNumber);
                    }
                }
            }
            if (isW) {
                if (originSize.width != 0) {
                    NSInteger h = (requestSize / (originSize.width * 1.f)) * originSize.height;
                    finalSize = CGSizeMake(requestSize, floor(h));
                }

            } else {
                if (originSize.height != 0) {
                    NSInteger w = (requestSize / (originSize.height * 1.f)) * originSize.width;
                    finalSize = CGSizeMake(w, floor(requestSize));
                }
            }
        }

        if (!CGSizeEqualToSize(finalSize, CGSizeZero)) {
            NSString *fixSize = [NSString stringWithFormat:@"%ld%@%ld",(NSInteger)finalSize.width, separatedStr, (NSInteger)finalSize.height];
            NSURLQueryItem *fixSizeItem = [[NSURLQueryItem alloc] initWithName:@"thumbnail" value:fixSize];
            [queryItems removeObject:sizeItem];
            [queryItems addObject:fixSizeItem];
        }

    }

    //去重複
    NSMutableArray<NSString *> *keys = @[].mutableCopy;
    queryItems = [queryItems bk_select:^BOOL(NSURLQueryItem *obj) {
        BOOL containsObject = [keys containsObject:obj.name];
        [keys addObject:obj.name];
        return !containsObject;
    }].mutableCopy;

    //首字母排序
    queryItems = [queryItems sortedArrayUsingComparator:^NSComparisonResult(NSURLQueryItem *obj1, NSURLQueryItem *obj2) {
        return [obj1.name compare:obj2.name options:NSCaseInsensitiveSearch];
    }].mutableCopy;

    //最終組合
    componts.queryItems = queryItems.copy;
    NSURL *finalURL = componts.URL;

    return finalURL;
}

SDWebImageManager

修復了URL之後,下一步要做什麼,如何將修復後的URL傳遞下去呢?也可以從上面的SDWebImage流程中看出,所有的圖片下載流程,離不開SDWebImageManager,所以我們繼承 SDWebImageManager ,重寫以下方法

- (SDWebImageCombidOperation *)loadImageWithURL:(nullable NSURL *)url
                                          options:(SDWebImageOptions)options
                                          context:(nullable SDWebImageContext *)context
                                         progress:(nullable SDImageLoaderProgressBlock)progressBlock
                                        completed:(nonnull SDInternalCompletionBlock)completedBlock

後續如果要走修復流程的只需要用我們封裝好的manager即可,實現如果下

- (SDWebImageCombidOperation *)loadImageWithURL:(nullable NSURL *)url
                                          options:(SDWebImageOptions)options
                                          context:(nullable SDWebImageContext *)context
                                         progress:(nullable SDImageLoaderProgressBlock)progressBlock
                                        completed:(nonnull SDInternalCompletionBlock)completedBlock
                                         corp:(BOOL)corp {

    NSURL *fixURL = [self.class fixURLWithUrl:url];
    SDInternalCompletionBlock fixBlock = completedBlock;
    if (![fixURL.absoluteString isEqualToString:url.absoluteString] && corp) {
        fixBlock = [self.class fixcompletedBlockWithOriginCompletedBlock:completedBlock url:url];
    }
    return [super loadImageWithURL:fixURL options:options context:context progress:progressBlock completed:^void(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, SDImageCacheType cacheType, BOOL finished, NSURL * _Nullable imageURL) {

        if (fixBlock) {
            fixBlock(image,data,error,cacheType,finished,imageURL);
        }
    }];

}

細心的同學可以發現我們增加了一個引數 corp ,如果上層業務就是需要按照他傳入的大小來的話,我們做一層裁剪縮放操作。具體操作放在了 fixBlock 中。 預設是不進行fix的,因為本身nos伺服器下發的圖片也不一定是業務傳入希望的尺寸。

fixblock 核心的程式碼是用了sd_webimage自帶的裁剪

cutImage = [image sd_resizedImageWithSize:requestSize scaleMode:[urlInfo.cropStr isEqualToString:@"x"] ? SDImageScaleModeAspectFit : SDImageScaleModeAspectFill];

程式碼到這裡基本 fixURL 操作基本完成,但是如果需要相容老的快取(本地已經有的,而且永久快取(特殊case),但是線上已經下架的資源圖片的),在fixblock中,我們在載入失敗的情況下,用老的URL撈了一次本地快取。

[[self sharedManager] loadImageWithURL:url options:options | SDWebImageFromCacheOnly context:mutContext.copy progress:nil completed:completedBlock];

注意:已經fix過的URL不會再fix,是否是永久快取是通過imageCache區分的

SDWebImageFromCacheOnly 表示只從快取了讀取,避免了重複發請求的問題。

imageCache

上面說到要實現複用,需要修改imageCache,這裡不得不提以下SDWebImage找到快取的流程

從圖中可以看出,URL需要轉為cacheKey,然後再從記憶體或者磁碟中撈出快取。那麼我們如何改造呢,因為我們需要通過URL找到本地可以重用的圖片

cacheKey需要保留一定規則,通過cache可以看到原始URL的一些東西。所以我們cachekey是這麼生成的

+ (NSString *)cacheKeyForURL:(NSURL *)url  {

    NSURL *wUrl = url;
    NSString *host = wUrl.host;
    NSString *absoluteString = wUrl.absoluteString;
    if (!host)
    {
       return absoluteString;
    }

    NSRange hostRange = [absoluteString rangeOfString:host];
    if (hostRange.location + hostRange.length < absoluteString.length)
    {
       NSString *subString = [absoluteString substringFromIndex:hostRange.location + hostRange.length];
       if (subString.length != 0)
       {
           return subString;
       }
    }
    return absoluteString;
}

簡而言之,就是去掉host,保留剩餘的引數。 ps:因為fixURL去過請求引數重複,所以cacheKey也能同一張圖片保證唯一。

那通過URL怎麼找到本地的其他圖片呢,如何關聯上呢?

可以通過path,再查詢關聯的cachekey,然後找到對應的圖片

找到圖片後,選擇出一張可以使用的,對其進行裁剪操作,流程如下:

我們這裡對快取的圖片資訊封裝了一個物件,注意 會用資料庫持久化 ImageCacheKeyAndURLObject 陣列,他的key是請求URL連結中的 path ,注意資料庫有上限大小,同時會在適當的時機清理(如圖片快取過期等)

下面是封裝持久化的物件

@interface WebImageCacheImageInfo : NSObject

@property (nonatomic) BOOL isAnimation;
@property (nonatomic) CGFloat sizeW;
@property (nonatomic) CGFloat sizeH;

- (CGSize)size;

@end

@interface WebImageURLInfo : NSObject

@property (nonatomic) CGSize requestSize;
@property (nonatomic) NSString *cropStr;
@property (nonatomic) NSInteger quality;
@property (nonatomic) NSInteger enlarge;

@end

@interface WebImageCacheKeyAndURLObject : NSObject<NMModel>


@property (nonatomic, readonly) NSString *path;
@property (nonatomic) NSString *cacheKey;
@property (nonatomic, nullable) NSURL *url;
@property (nonatomic, nullable) WebImageCacheImageInfo *imageInfo;

- (NSArray<WebImageCacheKeyAndURLObject *> *)relationObjects;
- (nullable WebImageCacheKeyAndURLObject *)canReuseObject;
- (WebImageURLInfo *)urlInfo;
- (void)storeImage:(UIImage *)image;
- (void)remove;
@end

如何儲存圖片資訊呢

- (void)storeImage:(UIImage *)image {
    if (self.path.length == 0) {
        return;
    }
    BOOL isAniamtion = image.sd_isAnimated;
    CGSize size = image.size;
    if (image) {
        _imageInfo = [WebImageCacheImageInfo new];
        _imageInfo.sizeH = size.height;
        _imageInfo.sizeW = size.width;
        _imageInfo.isAnimation = isAniamtion;
    }

    NSMutableArray<WebImageCacheKeyAndURLObject *> *items = [[self searchfromDBUsePath:self.path] mutableCopy];
    if (items.count == 0) {
        items = @[].mutableCopy;
    }
    if ([items containsObject:self]) {
        [items removeObject:self];
    }
    [items addObject:self];
    [self saveDBForPath:self.path item:items];
}

如何判斷圖片是否可以複用呢?

- (WebImageCacheKeyAndURLObject *)canReuseObject {

    WebImageURLInfo *info = self.urlInfo;
    if (CGSizeEqualToSize(CGSizeZero, info.requestSize)) {
        return nil;
    }
    NSArray<WebImageCacheKeyAndURLObject *> *relationObjects = [self relationObjects];

    // 非動圖 尺寸非0

    relationObjects = [relationObjects bk_select:^BOOL(WebImageCacheKeyAndURLObject *obj) {
        return !obj.imageInfo.isAnimation && obj.imageInfo.size.width > 0 && obj.imageInfo.size.height > 0;
    }];

    @weakify(self)
    relationObjects = [relationObjects bk_select:^BOOL(WebImageCacheKeyAndURLObject *obj) {
        @strongify(self)
        return ![obj.cacheKey isEqualToString:self.cacheKey];
    }];

    // 質量大於請求的圖
    relationObjects = [relationObjects bk_select:^BOOL(WebImageCacheKeyAndURLObject *obj) {

        WebImageURLInfo *objInfo = obj.urlInfo;

        NSInteger quality = objInfo.quality == 0 ? 75 : objInfo.quality;
        NSInteger requestQuality = info.quality == 0 ? 75 : info.quality;
        return quality >= requestQuality;
    }];

    //縮放能支援的
    NSArray<WebImageCacheKeyAndURLObject *> *canUses = nil;
    if ([info.cropStr isEqualToString:@"x"] || [info.cropStr isEqualToString:@"z"]) {
        canUses = [relationObjects bk_select:^BOOL(WebImageCacheKeyAndURLObject *obj) {
            WebImageURLInfo *objInfo = obj.urlInfo;
            if ([objInfo.cropStr isEqualToString:@"x"] || [objInfo.cropStr isEqualToString:@"z"]) {
                CGSize displaySize = WebImageDisplaySizeForImageSizeContentSizeContentMode(obj.imageInfo.size, info.requestSize, [info.cropStr isEqualToString:@"x"] ? UIViewContentModeScaleAspectFit :  UIViewContentModeScaleAspectFill);

                CGFloat p = 0;
                if (info.requestSize.width > 0) {
                    p = displaySize.width / obj.imageInfo.size.width;
                } else {
                    p = displaySize.height / obj.imageInfo.size.height;
                }
                return p <= 1;
            } else {
                // y 不可以轉z/x
                return NO;
            }
        }];
    } else if ([info.cropStr isEqualToString:@"y"]) {
        canUses = [relationObjects bk_select:^BOOL(WebImageCacheKeyAndURLObject *obj) {
            WebImageURLInfo *objInfo = obj.urlInfo;
            if ([objInfo.cropStr isEqualToString:@"x"] || [objInfo.cropStr isEqualToString:@"z"]) {
                CGSize displaySize = WebImageDisplaySizeForImageSizeContentSizeContentMode(obj.imageInfo.size, info.requestSize, UIViewContentModeScaleAspectFill);
                CGFloat p = 0;
                if (info.requestSize.width > 0) {
                    p = displaySize.width / obj.imageInfo.size.width;
                } else {
                    p = displaySize.height / obj.imageInfo.size.height;
                }
                return p <= 1;
            } else  if ([objInfo.cropStr isEqualToString:@"y"]) {
                return (obj.imageInfo.size.width >= info.requestSize.width && obj.imageInfo.size.height >= info.requestSize.height);
            }
            return NO;
        }];
    }
    return canUses.firstObject;
}

要過濾動圖,因為動圖本地裁剪比較難處理,而且佔比不高,所以這裡先忽略他, WebImageCacheKeyAndURLObject 記錄了 cacheKey 等一些關聯資訊,核心還記錄了實際快取的圖片尺寸。方便查詢。 WebImageDisplaySizeForImageSizeContentSizeContentMode 就是傳入圖片大小,容器大小,填充模式計算出縮放後的圖片大小。

關聯關係有了,再什麼時機去查詢呢?

我們繼承SDImageCache,重寫了他

- (nullable NSData *)diskImageDataBySearchingAllPathsForKey:(nullable NSString *)key;

這個方法,在找不到data的情況下更進一步查詢。找到的關聯圖片進行裁剪,使用和上面一樣的修正方法

if ([objInfo.cropStr isEqualToString:@"x"] || [objInfo.cropStr isEqualToString:@"z"]) {
                result = [result fixResizedImageWithSize:requestSize scaleMode:[objInfo.cropStr isEqualToString:@"x"] ? UIViewContentModeScaleAspectFit : UIViewContentModeScaleAspectFill needCorp:NO];
            } else if ([objInfo.cropStr isEqualToString:@"y"]) {
                result = [result fixResizedImageWithSize:requestSize scaleMode:UIViewContentModeScaleAspectFill needCorp:YES];
            }

這裡補充下fixsize方法

- (UIImage *)fixResizedImageWithSize:(CGSize)size scaleMode:(UIViewContentMode)scaleMode needCorp:(BOOL)needCorp {

    if (scaleMode != UIViewContentModeScaleAspectFit && scaleMode!= UIViewContentModeScaleAspectFill) {
        return self;
    }

    // 如果是fill模式,實際size會大於容器size 如果需要裁剪為容器大小就不走這一步了
    if (scaleMode == UIViewContentModeScaleAspectFill && !needCorp) {
        size = WebImageDisplaySizeForImageSizeContentSizeContentMode(self.size, size, scaleMode);
    }

    UIImage *fixImage = [self sd_resizedImageWithSize:size scaleMode:scaleMode == UIViewContentModeScaleAspectFit ? SDImageScaleModeAspectFit : SDImageScaleModeAspectFill];
    return fixImage;

}

這樣我們就可以得到修復後的圖片,流程完成。

UIImageView 及 UIButton 等分類

我們包裝一層自己的下載,然後傳入我們的manager即可。

context = @{
           SDWebImageContextCustomManager:[WebImageManager sharedManager]
       };

額外說一點

CDN命中率和這個資源是否曾經被請求過有關,命中CDN的key又是請求的URL,所以大前端請求都保持一致的規則很重要!這樣每一端都可以蹭到其他端預熱過的圖片資源。

總結

我們核心點就 修正了URL 改造了 SDWebImageManager , SDImageCache ,並且建立了 CacheKey 關聯關係,並且 相容一些老邏輯 這樣本地流程就都算走通了。本文除了常規優化圖片的思路外提供了一種新的思路,本地利用已經下載過的大小圖做文章,從而起到加速及節流的效果,並取得一定的收益,如果讀者也是採用類似拼接url下載圖片的方式的話,這種優化方式可以一試。全部做完取得成果具體數值不便展示,大概為提升下載速度 50%,同時能節省一定的 CDN頻寬,日均節約至少 10% 。

本文釋出自網易雲音樂技術團隊,文章未經授權禁止任何形式的轉載。我們常年招收各類技術崗位,如果你準備換工作,又恰好喜歡雲音樂,那就加入我們 grp.music-fe(at)corp.netease.com!