Android WebView頁面載入最佳化

標籤：android   webview   

目前webapp越來越多，體驗也越來越好，為了能夠更好的使用WebView展示出流暢的的頁面，可以從以下幾點做最佳化：

• WebView緩衝
• 資源檔本機存放區
• 減少耗時操作
• 用戶端UI最佳化

可能有人會說了，為什麼不做成native的呢，這樣就不用那麼的麻煩了。如果我需要載入的內容都是靜態，當然做成native的是最好的，為什麼我們要使用WebView呢，因為它可以載入一些容易改變的內容，同時也方便製作多平台應用。

WebView可以最佳化的哪些地方呢?

WebView緩衝

開啟WebView的緩衝功能可以減少對伺服器資源的請求，一般使用預設緩衝策略就可以了。

//設定 緩衝模式 webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);  // 開啟 DOM storage API 功能 webView.getSettings().setDomStorageEnabled(true); 

資源檔本機存放區

資源等檔案(不需要更新)本機存放區，在需要的時候直接從本地擷取。哪些資源需要我們去儲存在本地呢，當然是一些不會被更新的資源，例片檔案，js檔案，css檔案，替換的方法也很簡單，重寫WebView的方法即可。

{      try {      if (url.endsWith("icon.png")) {          InputStream is = appRm.getInputStream(R.drawable.icon);          WebResourceResponse response = new WebResourceResponse("image/png",            "utf-8", is);          return response;      } else if (url.endsWith("jquery.min.js")) {          InputStream is = appRm.getInputStream(R.raw.jquery_min_js);          WebResourceResponse response = new WebResourceResponse("text/javascript",            "utf-8", is);          return response;      }      } catch (IOException e) {      e.printStackTrace();      }      return super.shouldInterceptRequest(view, url);}

1. appRm為app資源管理員，讀取drawable，assets，raw下的資源，都是android系統的一些很簡單的函數調用。

2. getInputStream的參數代表資源具體位置

3. WebResourceResponse後的資源類型需要寫正確

有些時候我們會為我們的網站加入一些統計代碼，這些也可以精簡掉(自己使用的CNZZ的大概占的有10k左右)，可以使用Charles對用戶端進行抓包查看。

減少耗時操作

準確的說，是減少同步操作的操作時間，盡量使用非同步作業替代同步操作。如果服務端存在讀取資料庫和計算耗時的操作，盡量使用非同步(ajax)進行操作，把原本的時間花在非同步作業上。

舉個例子，A頁面到B頁面，A頁面實現登入功能，B頁面展示主功能頁面，如果讓B頁面去進行使用者登入資訊驗證的話，B頁面載入時間會加長(資料庫查詢等操作)，同時用戶端可能需要提供一個等待框(或進度條等)給使用者，那看看在A頁面使用非同步作業的優勢吧：

• 可以提供統一的js等待框，多平台保持一致性，減少用戶端代碼工作量。
• 載入頁面的時間變短。B頁面由於減少了耗時的操作，載入時間變短，使用者等待時間也變短。
• 可以方便加入一些驗證後的控制邏輯，不需要進行頁面跳轉。A頁面可以根據非同步作業進行結果判斷，做出相應的處理。

用戶端UI最佳化

怎麼讓使用者看不到WebView載入前的白色頁面呢？首次載入後頁面的跳轉可以用上面的步驟進行最佳化，可以提供給使用者一個很好的體驗，那載入的第一頁呢？我們需要WebView預先載入頁面，這個該怎麼做到的呢？下面提供兩種方法:

• ViewPager，將歡迎頁面與WebView頁面一起放進ViewPager中，設定預先載入頁面個數，使WebView所在頁面可以預先載入，在載入完畢的時候切換到WebView所在頁面。
• FrameLayout，將歡迎頁面與WebView頁面的布局合在一起，顯示在一個頁面內，起始隱藏WebView布局，待WebView載入完畢，隱藏歡迎布局，顯示WebView布局。

使用FrameLayout簡單一些，兩種方法都是需要對WebChromeClient的onProgressChanged進行監聽，載入完畢進行頁面切換，如下：

  webView.setWebChromeClient(new WebChromeClient() {        @Override        public void onProgressChanged(WebView view, int newProgress) {            super.onProgressChanged(view, newProgress);            if (newProgress >= 100) {                // 切換頁面            }        }    });

經過以上幾步的最佳化，一個流暢的webapp產生了。

更多文章請訪問小胖軒.

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android WebView頁面載入最佳化