現在很多專案中多變化的頁面更希望使用H5來實現，方便快捷，且不需要時刻的去升級版本。但在體驗上H5還是沒有原生的好，在native和H5之間的互動，已經webview載入的速度上都有一定的弊端，優化的方案很多，今天嘗試了一下將js css等資原始檔快取到本地，這樣後續載入網頁的時候速度上就會快一些。
當然，真正影響載入速度的有大概幾個點：
1.網頁中的諸多請求
2.js的執行已經css樣式的渲染
3.圖片等比較大的資源載入
4.網路等外界因素

今天就先解決第二點的優化，載入本地js css檔案。

shouldOverrideUrlLoading(WebView view, String url)
這個方法大家都很熟悉，url攔截，也是native和H5互動的一個重點，主要是兩端定義似有協議，攔截到是自定義的協議那麼可以做對應的事情：

H5端：
    定義一個點選事件：
HTML：
<div>
    <button class="size" id="btn1" onclick="clickme()">button-1</button>
</div>
Javascript：
   clickme =  function()  {
      document.location = "js://webview?arg1=111&arg2=222";
    }

Android端：

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Uri uri = Uri.parse(url);
            //判斷scheme 如果是私有定義的 攔截
            if (uri.getScheme()
                    .equals("js")) {
                if (uri.getAuthority()
                        .equals("webview")) {
                    //獲取攜帶的引數
                    String arg1 = uri.getQueryParameter("arg1");
                    //TODO 攔截掉 做對應的客戶端需要做的操作
                }
                return true;
            }
            return super.shouldOverrideUrlLoading(view, url);
        }
 

除了shouldOverrideUrlLoading該方法以外還有一個方法叫shouldInterceptRequest，該方法是攔截H5資源載入的方法，在5.10以前是shouldInterceptRequest(WebView view, String url),後面被shouldInterceptRequest(WebView view, WebResourceRequest request)替代（如需仔細瞭解該方法諮詢搜尋）。今天的內容就主要是該方法中去操作。

再分享前，再分享自己踩過的一個很重要的坑，再本地測試的時候我是將js和css檔案放在assert資料夾中的，且將Html檔案也放在裡面（為了方便），會有一個很重要的問題就是 shouldInterceptRequest該方法不會執行，具體是什麼原因希望瞭解的人可以分享一下。然後我將html放入手機儲存中就可以了。

1.一般再開發中H5 會有專門前端人員寫（本地測試是自己寫的）拿到前端的js和css檔案後命好名放在asset資料夾中（如需要動態去下載另外，且名字一定和前端確定好，script標籤中src路徑名稱相同）

2.然後當H5執行到js或者css的時候客戶端會有攔截，直接載入本地的js和css檔案，具體程式碼：

        @Nullable
        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
            //資源攔截 載入本地 js css 檔案
            String path = request.getUrl()
                    .getPath();
            String fileName = request.getUrl()
                    .getLastPathSegment();

            try {
                if (path.endsWith(".js")) {
                    InputStream inputStream = getAssets().open(fileName);
                    return new WebResourceResponse("text/javascript", "utf-8", inputStream);
                } else if (path.endsWith("css")) {
                    InputStream inputStream = getAssets().open(fileName);
                    return new WebResourceResponse("text/css", "utf-8", inputStream);

                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return super.shouldInterceptRequest(view, request);
        }

其實也很簡單，只是本地測試過程中踩了個坑，希望記錄一下，有知道的可以請教一下。