Android WebView 優化頁面加載效果

目前帶有Web功能的APP越來越多，為了能夠更好的使用WebView展示頁面，可以考慮做相關的優化：WebView 緩存，資源文件本地存儲，客戶端UI優化。

可能有些人會說，為什么不做Native的，因為Native局限性比較大，當需要加載的內容變化情況比較大的情況時，需要頻繁的發布版本，這樣是不合理的，所以推薦使用WebView來加載一些比較容易改變的內容，同時也方便多個平台的應用同時制作。

WebView緩存

開啟WebView的緩存功能可以減少對服務器資源的請求，一般使用默認緩存策略就可以了。

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

需要注意的是，建議定期清除緩存，這樣保證APP占用存儲空間處在一定的范圍內。

資源文件本地存儲

資源等文件(不需要更新)本地存儲，在需要的時候直接從本地獲取。哪些資源需要我們去存儲在本地呢，當然是一些不會被更新的資源，例如圖片文件，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后的資源類型需要寫正確

客戶端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) {
             // 切換頁面
         }
     }
});