H5性能優化方面的探索

時間 2019-11-30

原文原文鏈接

H5性能優化方面的探索

H5很重要，很重要，很重要，重要的事情必須重複多遍，H5的優勢：跨平臺、迭代快、開發體驗好。缺點：加載慢，用戶體驗差。因此在接下來很長一段時間內我將會從H5的幾個缺點發面去研究如何優化。css

1、緩存問題及其解決辦法

常常遇到一個問題，H5頁面因爲緩存問題常常在H5發佈新版本以後客戶端App看不到最新的效果，以前因爲雜七雜八的問題項目工期緊沒好好研究，最近抽空研究了下緩存問題。html

緩存問題具體表現爲：UIWebview首次打開加載慢；第二次加載速度明顯快；H5資源更新事後在App上看不到更改的效果git

爲此我認爲是緩存形成的問題，我進入App目錄下，看到Library下的Caches下面有不少文件名稱很長的文件，點擊預覽能夠看到是圖片、css等，原本我想着找出H5資源緩存到App中的特色，而後用NSFileManager刪除掉緩存文件，發現此路不通。web

我想經過控制變量法研究緩存是否存在。

作了一個實驗。步驟以下：

用HBuilder（一個編輯器，開啓後本機端口8020就能夠訪問網頁）打開H5工程
在App的一個UIWebview頁面上經過和電腦在同一個局域網的方式加載網頁
在App上查看效果，觀察某個元素的樣式
在HBuilder編輯器中修改元素樣式
在App上將UIWebView返回上一界面，再次進入查看該元素的樣式
肯定有沒有變化，來肯定有沒有緩存

結論：頁面實時效果變化的，沒有緩存瀏覽器

對比實驗：緩存

用HBuilder（一個編輯器，開啓後本機端口8020就能夠訪問網頁）打開H5工程
git提交到服務端
在App的一個UIWebview頁面上經過公網IP的方式加載網頁
在App上查看效果，觀察某個元素的樣式
在HBuilder編輯器中修改元素樣式
git提交後發佈到服務器上
在App上將UIWebView返回上一界面，再次進入查看該元素的樣式
肯定有沒有變化，來肯定有沒有緩存

結論：頁面沒有看到最新的效果，明顯緩存了。可是我很想知道爲何本地局域網的方式請求網頁不會緩存，而經過公網IP的方式會緩存。性能優化

爲此，我作了進一步的實驗，用谷歌瀏覽器分別請求本地局域網和公網ip查看資源加載的狀況。服務器

一、公網IP 網絡

二、本地局域網運維

關鍵詞Status Code

結論：從圖上能夠看出本地局域網無論首次加載仍是刷新都是直接請求；而經過局域網的方式請求：首次請求是從服務器上獲取，在此刷新的時候是從（from memory cache）中獲取的。

猜測

局域網的方式網速都比較快因此不會緩存；

公網IP的方式可能因爲網速問題會將首次請求到的資源緩存下來。

因此肯定緩存存在了，那麼如何避免緩存？

App在啓動後請求一個接口，這個接口的目的是獲取當前H5資源的版本號
將得到的版本號保存下來（App本地保存）
因爲UIWebView上加載網頁，發起網絡請求均可以經過一個代理方法所攔截，因此咱們能夠在這個代理方法中判斷url的參數，多是http://www.a.com/login、http://www.a.com/login.html、http://www.a.com/login.html?name=geek、http://www.a.com/login#readme等等，因此咱們判斷過url後考慮如何將版本號加到url裏面
因爲咱們的App使用了不一樣模塊的UIWebView，可是都是在UIWebView上須要大量的JS交互，因此使用了WebViewJavascriptBridge這個庫。UIWebView自己的代理方法不會執行，因此修改這個庫裏面的WebViewJavascriptBridge.m文件的代碼，差很少是下面的方式

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if (webView != _webView) { return YES; }
    NSURL *url = [rntity Tag 的資源直接訪問equest URL];
    if ([request.URL.absoluteString containsString:@"http"] || [request.URL.absoluteString containsString:@"https"]) {
        if ([request.URL.absoluteString containsString:@"?"]) {
            url = [NSURL URLWithString:[NSString stringWithFormat:@"%@&h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];
        }else{
            url = [NSURL URLWithString:[NSString stringWithFormat:@"%@?h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];
        }
    }
    LBPLOG(@"url->%@",[url absoluteString]);
    __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
    if ([_base isCorrectProcotocolScheme:url]) {
        if ([_base isBridgeLoadedURL:url]) {
            [_base injectJavascriptFile];
        } else if ([_base isQueueMessageURL:url]) {
            NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
            [_base flushMessageQueue:messageQueueString];
        } else {
            [_base logUnkownMessage:url];
        }
        return NO;
    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
    } else {
        return YES;
    }
}

總結：

App的緩存問題暫時研究到這裏，後期會繼續研究其餘方面的問題