[[413803]]

本文轉(zhuǎn)載自微信公眾號(hào)「網(wǎng)羅開發(fā)」，作者傷心的Easyman 。轉(zhuǎn)載本文請(qǐng)聯(lián)系網(wǎng)羅開發(fā)公眾號(hào)。

優(yōu)化背景

• 眾所周知，H5 的部分優(yōu)勢(shì)(開發(fā)快，迭代快，熱更新)是很明顯的，公司客戶端的部分業(yè)務(wù)都是由 H5 來(lái)實(shí)現(xiàn)的，網(wǎng)絡(luò)好的情況下體驗(yàn)也是很不錯(cuò)的
• 但是其實(shí) H5 的體驗(yàn)是比原生差的，這就需要想辦法如何提高 H5 加載速度，優(yōu)化體驗(yàn)，首屏的加載速度還是很影響體驗(yàn)的

加載速度

關(guān)于加載速度慢有很多文章都已經(jīng)詳細(xì)解釋了，h5在加載工作中做了很多事

初始化 webview -> 請(qǐng)求頁(yè)面 -> 下載數(shù)據(jù) -> 解析HTML -> 請(qǐng)求 js/css 資源 -> dom 渲染 -> 解析 JS 執(zhí)行 -> JS 請(qǐng)求數(shù)據(jù) -> 解析渲染 -> 下載渲染圖片

一般頁(yè)面在 dom 渲染后才能展示，可以發(fā)現(xiàn)，H5 首屏渲染白屏問(wèn)題的原因關(guān)鍵在于，如何優(yōu)化減少?gòu)恼?qǐng)求下載頁(yè)面到渲染之間這段時(shí)間的耗時(shí)。

前后端優(yōu)化

這其中可做的優(yōu)化特別多，前后端能夠做的是：

• 降低請(qǐng)求量：減少 HTTP 請(qǐng)求數(shù), 合并資源，minify / gzip 壓縮，webP，lazyLoad。
• 因?yàn)槭謾C(jī)瀏覽器同時(shí)響應(yīng)請(qǐng)求是 4 個(gè)，4 個(gè)的請(qǐng)求數(shù)也許不是特別靠譜，沒有查到出處，但是肯定是越少越好。
• HTTP 協(xié)議緩存請(qǐng)求，離線緩存 manifest，離線數(shù)據(jù)緩存 localStorage。
• 加快請(qǐng)求速度：預(yù)解析 DNS，減少域名數(shù)，并行加載，CDN 分發(fā)。
• 渲染：JS/CSS 優(yōu)化，加載順序，服務(wù)端渲染模板直出。

一般情況下，只要對(duì)照這個(gè)列表，對(duì)比差異就基本能搞定絕大部分前端性能問(wèn)題了。不過(guò)我們?cè)诶锩孀屑?xì)再分析下，對(duì)首屏啟動(dòng)速度影響最大的就是網(wǎng)絡(luò)請(qǐng)求，包括請(qǐng)求 HTML、css、image 等靜態(tài)資源和展示數(shù)據(jù)的請(qǐng)求。所以客戶端內(nèi)，優(yōu)化最關(guān)鍵的其實(shí)就是如何緩存這些網(wǎng)絡(luò)資源，也就是離線包緩存方案。

離線包方案的實(shí)踐

方案選型是兩種

• 基于 LocalWebServer 實(shí)現(xiàn) WKWebView 離線資源加載
• 使用 WKURLSchemeHandler 實(shí)現(xiàn) WKWebView 離線資源加載

LocalWebServer

基于 iOS 的 local web server，目前大致有以下幾種較為完善的框架：

• CocoaHttpServer (支持 iOS、macOS 及多種網(wǎng)絡(luò)場(chǎng)景)
• GCDWebServer (基于 iOS，不支持 https 及 webSocket)
• Telegraph (Swift 實(shí)現(xiàn)，功能較上面兩類更完善)

當(dāng)時(shí)采用的是 GCDWebServer，在打開 APP 后直接啟動(dòng)Webserver，H5 的鏈接直接替換成本地 localhost + 端口號(hào)鏈接的地址。

本來(lái)的方案是本地服務(wù)器和遠(yuǎn)端h5服務(wù)器同步下載資源，下載后客戶端請(qǐng)求本地服務(wù)器的路徑，如未找到相應(yīng)的資源再請(qǐng)求遠(yuǎn)端服務(wù)器的資源文件。

測(cè)試過(guò)程中碰到很多奇怪的問(wèn)題(暫不一一舉例)，也有提到以下問(wèn)題并且時(shí)間緊急所以并未做進(jìn)一步的深入:

• 資源訪問(wèn)權(quán)限安全問(wèn)題
• APP 前后臺(tái)切換時(shí)，服務(wù)重啟性能耗時(shí)問(wèn)題
• 服務(wù)運(yùn)行時(shí)，電量及 CPU 占有率問(wèn)題
• 多線程及磁盤 IO 問(wèn)題

WKURLSchemeHandler

關(guān)于離線包

前端項(xiàng)目的靜態(tài)資源直接打包成 zip 包，APP 在啟動(dòng)時(shí)開始下載該包并解壓到本地。WKWebview 通過(guò) WKURLSchemeHandler 攔截并加載本地資源文件。關(guān)于離線包的分發(fā)，就是普通的 zip 離線包和一個(gè)版本控制的 json 文件，每次打離線包會(huì)修改 json 文件里的版本號(hào)，并附有離線包下載地址。此處可以優(yōu)化的更好，但暫時(shí)并不需要太復(fù)雜。

離線包的下載和解壓

只是簡(jiǎn)單的下載并解壓到本地資源路徑，關(guān)于版本比對(duì)的代碼這里沒有展示出來(lái)，自行注意，避免每次都全量更新。

/* 創(chuàng)建網(wǎng)絡(luò)下載對(duì)象 */ 
AFURLSessionManager *manager = [[AFURLSessionManager alloc] initWithSessionConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]]; 
/* 下載地址 */ 
NSURL *url = [NSURL URLWithString:request.urlParameters.path]; 
NSURLRequest *request = [NSURLRequest requestWithURL:url]; 
/* 下載路徑 */ 
//獲取Document文件 
NSString * docsdir = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; 
NSString * zipFilePath = [docsdir stringByAppendingPathComponent:@"zip"];//將需要?jiǎng)?chuàng)建的串拼接到后面 
NSString * H5FilePath = [docsdir stringByAppendingPathComponent:@"H5"]; 
NSFileManager *fileManager = [NSFileManager defaultManager]; 
BOOL zipIsDir = NO; 
BOOL H5IsDir = NO; 
// fileExistsAtPath 判斷一個(gè)文件或目錄是否有效，isDirectory判斷是否一個(gè)目錄 
BOOL zipexisted = [fileManager fileExistsAtPath:zipFilePath isDirectory:&zipIsDir]; 
BOOL H5Existed = [fileManager fileExistsAtPath:H5FilePath isDirectory:&H5IsDir]; 
if ( !(zipIsDir == YES && zipexisted == YES) ) {//如果文件夾不存在 
    [fileManager createDirectoryAtPath:zipFilePath withIntermediateDirectories:YES attributes:nil error:nil]; 
} 
if (!(H5IsDir == YES && H5Existed == YES) ) { 
    [fileManager createDirectoryAtPath:H5FilePath withIntermediateDirectories:YES attributes:nil error:nil]; 
} 
//刪除 
//        [[NSFileManager defaultManager] removeItemAtPath:zipFilePath error:nil]; 
NSString *filePath = [zipFilePath stringByAppendingPathComponent:url.lastPathComponent]; 
/* 開始請(qǐng)求下載 */ 
NSURLSessionDownloadTask *downloadTask = [manager downloadTaskWithRequest:request progress:^(NSProgress * _Nonnull downloadProgress) { 
    NSLog(@"下載進(jìn)度：%.0f％", downloadProgress.fractionCompleted * 100); 
} destination:^NSURL * _Nonnull(NSURL * _Nonnull targetPath, NSURLResponse * _Nonnull response) { 
    /* 設(shè)定下載到的位置 */ 
    return [NSURL fileURLWithPath:filePath]; 
} completionHandler:^(NSURLResponse * _Nonnull response, NSURL * _Nullable filePath, NSError * _Nullable error) { 
    NSTimeInterval delta = CACurrentMediaTime() - self->start; 
     NSLog(@"下載完成，耗時(shí)：%f",delta); 
    // filePath就是你下載文件的位置，你可以解壓，也可以直接拿來(lái)使用 
    NSString *imgFilePath = [filePath path];// 將NSURL轉(zhuǎn)成NSString 
    NSString *zipPath = imgFilePath; 
    //刪除  
//            [[NSFileManager defaultManager] removeItemAtPath:H5FilePath error:nil]; 
    [fileManager createDirectoryAtPath:H5FilePath withIntermediateDirectories:YES attributes:nil error:nil]; 
    //解壓 
    [SSZipArchive unzipFileAtPath:zipPath toDestination:H5FilePath]; 
    //清理緩存 
    [DLCommenHelper clearWebCache]; 
}]; 
[downloadTask resume]; 

WKWebview 緩存池

美團(tuán)有篇文章提到，在使用 iOS 10 的模擬器測(cè)試 WKWebView 的加載速度，首次初始化的時(shí)間耗時(shí)有 700 多毫秒。其實(shí)本人用 iOS 13 的真機(jī)，發(fā)現(xiàn)初始化的時(shí)間約在 200 毫秒左右甚至更短。雖然只占整個(gè)加載時(shí)間的特別小的一部分，但是本著能優(yōu)則優(yōu)的原則還是做了處理，也就是預(yù)加載 Webview。

• 新建了一個(gè)單例類 SDIWKWebViewPool，默認(rèn)緩存池里的數(shù)量是 10 個(gè)

+ (instancetype)sharedInstance { 
    static dispatch_once_t onceToken; 
    static SDIWKWebViewPool *instance = nil; 
    dispatch_once(&onceToken,^{ 
        instance = [[super allocWithZone:NULL] init]; 
    }); 
    return instance; 
} 
  
+ (id)allocWithZone:(struct _NSZone *)zone{ 
    return [self sharedInstance]; 
} 
  
- (instancetype)init 
{ 
    self = [super init]; 
    if (self) { 
        self.initialViewsMaxCount = 10; 
        self.preloadedViews = [NSMutableArray arrayWithCapacity:self.initialViewsMaxCount]; 
    } 
    return self; 
} 

• 在合適的地方提前調(diào)用 //預(yù)加載wkwebview [[SDIWKWebViewPool sharedInstance] prepareWithCount:10];,自行選擇在 delegate 或主頁(yè)面初始化的時(shí)候調(diào)用。

/** 
 預(yù)初始化若干WKWebView 
  
 @param count 個(gè)數(shù) 
 */ 
- (void)prepareWithCount:(NSUInteger)count { 
    NSTimeInterval start = CACurrentMediaTime(); 
    // Actually does nothing, only initialization must be called. 
    while (self.preloadedViews.count < MIN(count,self.initialViewsMaxCount)) { 
        id preloadedView = [self createPreloadedView]; 
        if (preloadedView) { 
            [self.preloadedViews addObject:preloadedView]; 
        } else { 
            break; 
        } 
    } 
    NSTimeInterval delta = CACurrentMediaTime() - start; 
    NSLog(@"=======初始化耗時(shí)：%f",  delta); 
} 
  
/** 
 從池中獲取一個(gè)WKWebView 
 @return WKWebView 
 */ 
- (WKWebView *)getWKWebViewFromPool { 
    if (!self.preloadedViews.count) { 
        NSLog(@"不夠啦！"); 
        return [self createPreloadedView]; 
    } else { 
        id preloadedView = self.preloadedViews.firstObject; 
        [self.preloadedViews removeObject:preloadedView]; 
        return preloadedView; 
    } 
} 

• 創(chuàng)建 webview 的方法如下,需要注意的是 kWKWebViewReuseScheme，WKWebView 需要注冊(cè)這個(gè) scheme 才能實(shí)現(xiàn)攔截，這個(gè)是 WKWebview 攔截需要的準(zhǔn)備工作。
• SDICustomURLSchemeHandler 是我的自定義攔截類

關(guān)于這里的版本為什么設(shè)置成 iOS 12 以上，WKURLSchemeHandler 是蘋果 iOS 11 就已推出，但是有發(fā)現(xiàn)某款機(jī)型在 iOS 11.2 上攔截失效，導(dǎo)致產(chǎn)生 Webview 白屏。所以這里一刀切，直接 12 以上才處理。其實(shí) iOS 12 一下的用戶量特別少，所以不需要太擔(dān)心。

//scheme定義 
#define kWKWebViewReuseScheme    @"kwebview" 
 
/** 
 創(chuàng)建一個(gè)WKWebView 
 @return WKWebView 
 */ 
- (WKWebView *)createPreloadedView { 
      WKUserContentController *userContentController = WKUserContentController.new; 
     WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; 
      NSString *cookieSource = [NSString stringWithFormat:@"document.cookie = 'API_SESSION=%@';",  [SAMKeychain usertoken]]; 
      WKUserScript *cookieScript = [[WKUserScript alloc] initWithSource:cookieSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO]; 
      [userContentController addUserScript:cookieScript]; 
     // 賦值userContentController 
     configuration.userContentController = userContentController; 
     configuration.preferences.javaScriptEnabled = YES; 
     configuration.suppressesIncrementalRendering = YES; // 是否支持記憶讀取 
     [configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];//支持跨域 
//    WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init]; 
//    WKUserContentController *wkUController = [[WKUserContentController alloc] init]; 
//    wkWebConfig.userContentController = wkUController; 
 
    if (@available(iOS 12.0, *)) { 
        [configuration setURLSchemeHandler:[[SDICustomURLSchemeHandler alloc] init] forURLScheme:kWKWebViewReuseScheme]; 
    } else { 
        // Fallback on earlier versions 
    } 
    WKWebView *wkWebView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:configuration]; 
    //根據(jù)自己的業(yè)務(wù) 
    wkWebView.allowsBackForwardNavigationGestures = YES; 
    return wkWebView; 
} 

替換 url scheme

if (@available(iOS 12.0, *)) { 
    if([urlString hasPrefix:@"http"] && [urlString containsString:@"ui-h5"]){ 
        urlString = [urlString stringByReplacingOccurrencesOfString:@"https" withString:kWKWebViewReuseScheme]; 
    } 
} 

這里是通過(guò)規(guī)則直接把 https 替換為 kWKWebViewReuseScheme,也就是替換 url scheme http(s) 為自定義協(xié)議，完成這一步后，攔截生效。

需要注意的有兩點(diǎn):

• 前端這邊加載 js 等資源都是用相對(duì)路徑，前端的 ajax 請(qǐng)求，像 post 請(qǐng)求，scheme 使用 http(s) 不使用自定義協(xié)議，這樣native 不會(huì)攔截，完全交給 H5 與服務(wù)器交互，就不會(huì)發(fā)生發(fā)送 post 請(qǐng)求，body 丟失的情況。
• 在我的項(xiàng)目里，H5 對(duì)服務(wù)器的請(qǐng)求都是通過(guò) native 端來(lái)轉(zhuǎn)發(fā)的，所以也不存在攔截 post 請(qǐng)求，body 丟失的情況。所以上面這樣的改動(dòng)對(duì) H5 端是無(wú)侵入式的，不需要修改業(yè)務(wù)代碼。

最最重要的自定義 SDICustomURLSchemeHandler 類

- (void)webView:(WKWebView *)webView startURLSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask 
API_AVAILABLE(ios(12.0)){ 
    dispatch_sync(self.serialQueue, ^{ 
        [_taskVaildDic setValue:@(YES) forKey:urlSchemeTask.description]; 
    }); 
     
    NSDictionary *headers = urlSchemeTask.request.allHTTPHeaderFields; 
    NSString *accept = headers[@"Accept"]; 
     
    //當(dāng)前的requestUrl的scheme都是customScheme 
    NSString *requestUrl = urlSchemeTask.request.URL.absoluteString; 
    NSString *fileName = [[requestUrl componentsSeparatedByString:@"?"].firstObject componentsSeparatedByString:@"ui-h5/"].lastObject; 
    NSString *replacedStr = [requestUrl stringByReplacingOccurrencesOfString:kWKWebViewReuseScheme withString:@"https"]; 
    self.replacedStr = replacedStr; 
    //Intercept and load local resources. 
    if ((accept.length >= @"text".length && [accept rangeOfString:@"text/html"].location != NSNotFound)) {//html 攔截 
        [self loadLocalFile:fileName urlSchemeTask:urlSchemeTask]; 
    } else if ([self isMatchingRegularExpressionPattern:@"\\.(js|css)" text:requestUrl]) {//js、css 
        [self loadLocalFile:fileName urlSchemeTask:urlSchemeTask]; 
    } else if (accept.length >= @"image".length && [accept rangeOfString:@"image"].location != NSNotFound) {//image 
      NSString *key = [[SDWebImageManager sharedManager] cacheKeyForURL:[NSURL URLWithString:replacedStr]]; 
        [[SDWebImageManager sharedManager].imageCache queryImageForKey:key options:SDWebImageRetryFailed context:nil completion:^(UIImage * _Nullable image, NSData * _Nullable data, SDImageCacheType cacheType) { 
            if (image) { 
                NSData *imgData = UIImageJPEGRepresentation(image, 1); 
                NSString *mimeType = [self getMIMETypeWithCAPIAtFilePath:fileName] ?: @"image/jpeg"; 
                [self resendRequestWithUrlSchemeTask:urlSchemeTask mimeType:mimeType requestData:imgData]; 
            } else { 
                [self loadLocalFile:fileName urlSchemeTask:urlSchemeTask]; 
            } 
        }]; 
    } else { 
        //return an empty json. 
        NSData *data = [NSJSONSerialization dataWithJSONObject:@{ } options:NSJSONWritingPrettyPrinted error:nil]; 
        [self resendRequestWithUrlSchemeTask:urlSchemeTask mimeType:@"text/html" requestData:data]; 
    } 
} 
 
-(BOOL)isMatchingRegularExpressionPattern:(NSString *)pattern text:(NSString *)text{ 
    NSError *error = NULL; 
    NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionCaseInsensitive error:&error]; 
    NSTextCheckingResult *result = [regex firstMatchInString:text options:0 range:NSMakeRange(0, [text length])]; 
    return MHObjectIsNil(result)?NO:YES; 
} 

• 上面的代碼是攔截資源請(qǐng)求后的處理代碼。收到攔截請(qǐng)求后，先獲取本地資源包對(duì)應(yīng)的資源，轉(zhuǎn)換成 data 回傳給 webView 進(jìn)行渲染處理;若本地沒有，則 customScheme 替換成 https 的 url 重發(fā)請(qǐng)求通知 webview，這就是基本流程。
• 以下就是加載本地資源和重發(fā)請(qǐng)求的代碼

  //Load local resources, eg: html、js、css... 
- (void)loadLocalFile:(NSString *)fileName urlSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask API_AVAILABLE(ios(11.0)){ 
    if(![self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] || !urlSchemeTask || fileName.length == 0){ 
                   return; 
    } 
     
    NSString * docsdir = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; 
    NSString * H5FilePath = [[docsdir stringByAppendingPathComponent:@"H5"] stringByAppendingPathComponent:@"h5"]; 
    //If the resource do not exist, re-send request by replacing to http(s). 
    NSString *filePath = [H5FilePath stringByAppendingPathComponent:fileName]; 
     
    if (![[NSFileManager defaultManager] fileExistsAtPath:filePath]) { 
        NSLog(@"開始重新發(fā)送網(wǎng)絡(luò)請(qǐng)求"); 
        if ([self.replacedStr hasPrefix:kWKWebViewReuseScheme]) { 
 
            self.replacedStr =[self.replacedStr stringByReplacingOccurrencesOfString:kWKWebViewReuseScheme withString:@"https"]; 
                     
            NSLog(@"請(qǐng)求地址:%@",self.replacedStr); 
             
        } 
     
        self.replacedStr = [NSString stringWithFormat:@"%@?%@",self.replacedStr,[SAMKeychain h5Version]?:@""]; 
        start = CACurrentMediaTime();//開始加載時(shí)間 
        NSLog(@"web請(qǐng)求開始地址:%@",self.replacedStr); 
         
        @weakify(self) 
        NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:self.replacedStr]]; 
        NSURLSession *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]]; 
        NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { 
            @strongify(self) 
            if([self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] == NO || !urlSchemeTask){ 
                return; 
            } 
            [urlSchemeTask didReceiveResponse:response]; 
            [urlSchemeTask didReceiveData:data]; 
            if (error) { 
                [urlSchemeTask didFailWithError:error]; 
            } else { 
                NSTimeInterval delta = CACurrentMediaTime() - self->start; 
                NSLog(@"=======web請(qǐng)求結(jié)束地址%@：：：%f", self.replacedStr, delta); 
                [urlSchemeTask didFinish]; 
            } 
        }]; 
        [dataTask resume]; 
        [session finishTasksAndInvalidate]; 
    } else { 
        NSLog(@"filePath:%@",filePath); 
        if(![self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] || !urlSchemeTask || fileName.length == 0){ 
            NSLog(@"return"); 
            return; 
        } 
         
        NSData *data = [NSData dataWithContentsOfFile:filePath options:NSDataReadingMappedIfSafe error:nil]; 
        [self resendRequestWithUrlSchemeTask:urlSchemeTask mimeType:[self getMIMETypeWithCAPIAtFilePath:filePath] requestData:data]; 
    } 
} 
 
- (void)resendRequestWithUrlSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask 
                              mimeType:(NSString *)mimeType 
                           requestData:(NSData *)requestData  API_AVAILABLE(ios(11.0)) { 
    if(![self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] || !urlSchemeTask|| !urlSchemeTask.request || !urlSchemeTask.request.URL){ 
        return; 
    } 
 
    NSString *mimeType_local = mimeType ? mimeType : @"text/html"; 
    NSData *data = requestData ? requestData : [NSData data]; 
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:urlSchemeTask.request.URL 
                                                        MIMEType:mimeType_local 
                                           expectedContentLength:data.length 
                                                textEncodingName:nil]; 
    [urlSchemeTask didReceiveResponse:response]; 
    [urlSchemeTask didReceiveData:data]; 
    [urlSchemeTask didFinish]; 
} 

整個(gè)過(guò)程中遇到的一些踩坑點(diǎn)

1. 'The task has already been stopped'崩潰問(wèn)題

• _taskVaildDic 是一個(gè) NSMutableDictionary，它里面存的是以當(dāng)前的 urlSchemeTask做 key，攔截開始時(shí)設(shè)置 YES，收到停止通知時(shí)設(shè)置 NO。這是由于在快速切換 webview 時(shí)，之前的 urlSchemeTask 已經(jīng)停止但是后面再次調(diào)用了它的方法就會(huì)產(chǎn)生該崩潰。
• 在實(shí)際使用過(guò)程中，用 bugly 監(jiān)控到還是會(huì)有該崩潰發(fā)生，只不過(guò)次數(shù)特別少，一天約四五條左右。還在尋找問(wèn)題的原因中。

- (void)webView:(WKWebView *)webView startURLSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask 
API_AVAILABLE(ios(12.0)){ 
    dispatch_sync(self.serialQueue, ^{ 
        [_taskVaildDic setValue:@(YES) forKey:urlSchemeTask.description]; 
    }); 
} 
 
- (void)webView:(nonnull WKWebView *)webView stopURLSchemeTask:(nonnull id<WKURLSchemeTask>)urlSchemeTask  API_AVAILABLE(ios(12.0)){ 
    NSError *error = [NSError errorWithDomain:urlSchemeTask.request.URL.absoluteString code:0 userInfo:NULL]; 
    NSLog(@"weberror:%@",error); 
    dispatch_sync(self.serialQueue, ^{ 
         [self->_taskVaildDic setValue:@(NO) forKey:urlSchemeTask.description]; 
    }); 
} 

2. WKWebview 的默認(rèn)緩存策略問(wèn)題

之前未考慮到 WKWebview 的默認(rèn)緩存策略(WKWebView 默認(rèn)緩存策略完全遵循 HTTP 緩存協(xié)議)。

在 h5 打包上線并更新離線包后，H5 的資源文件修改是變更 md5 文件名的。由于緩存策略默認(rèn)時(shí)間是一個(gè)小時(shí)，會(huì)導(dǎo)致緩存的 url 加載不到修改后的 js，css 等文件(無(wú)論是本地離線包和遠(yuǎn)端服務(wù)器都已經(jīng)沒有這個(gè) md5 文件)。

簡(jiǎn)單的解決方案是通過(guò)資源鏈接加版本號(hào)后綴，每次更新資源的時(shí)候變更版本號(hào)，在上面的代碼中有做這部分處理。既保證了實(shí)時(shí)的更新，又保證了加載速度。

3. uni-app 圖片 CDN 問(wèn)題

做完上述的離線包優(yōu)化后，發(fā)現(xiàn)新下載 APP 的情況，會(huì)偶發(fā)加載很慢問(wèn)題。iOS 出現(xiàn)，但是 android 并未出現(xiàn)。

H5 部分是用 uni-app 開發(fā)的，所以發(fā)現(xiàn)這個(gè)問(wèn)題后由前端同事修復(fù)后恢復(fù)正常。

4. chunk-vendors.js 文件過(guò)大

這個(gè)問(wèn)題也是抓包發(fā)現(xiàn)的，在未打開離線包緩存開關(guān)時(shí)，發(fā)現(xiàn)h5的加載速度過(guò)慢，發(fā)現(xiàn)加載的 chunk-vendors.js 文件過(guò)大約 1.7M。 stopURLSchemeTask 方法里會(huì)報(bào) error 錯(cuò)誤信息 Error Domain= 的錯(cuò)誤信息。也由前端同事處理了這個(gè)問(wèn)題。

最終效果

統(tǒng)計(jì)了 APP 在不開離線包方案時(shí)，webview 平均加載時(shí)長(zhǎng)在 1.5-2 秒的范圍內(nèi)(這里是計(jì)算的 webview開始加載到導(dǎo)航完成的時(shí)間)，在上述優(yōu)化完成后，打開的時(shí)長(zhǎng)在 0.25-0.3 秒之間。

所以效果還是很顯著的，用戶的直觀感受就是接近于秒開的體驗(yàn)。

總結(jié)

上面的優(yōu)化過(guò)程中踩了很多坑，但是也重新梳理了 Webview 的加載過(guò)程，默認(rèn)緩存策略機(jī)制等內(nèi)容。上面的方案肯定不是最優(yōu)的，只是一個(gè)快速達(dá)到 WKWebview 接近秒開效果的一個(gè)方案。 

有什么更好的解決方案或者上述文中有不對(duì)的地方，希望大家指出，歡迎共同討論~