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);
}
appRm為app資源管理器,讀取drawable,assets,raw下的資源,都是android系統的一些很簡單的函式呼叫。
getInputStream的引數代表資源具體位置
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生成了。