ANDROID的WEBVIEW控制項載入網頁顯示速度慢的究極解決方案

Android用戶端中混搭HTML頁面，會出現雖然HTML內容載入完成，標題也正常顯示，但是整個網頁需要等到近5秒（甚至更多）時間才會顯示出來。研究了很久，搜遍了國外很多網站，也看過PhoneGap的代碼，一直無解。

一般人堆WebView的加速，都是建議先用webView.getSettings().setBlockNetworkImage(true); 將圖片下載阻塞，然後在瀏覽器的OnPageFinished事件中設定webView.getSettings().setBlockNetworkImage(false); 通過圖片的延遲載入，讓網頁能更快地顯示。

但是，通過實際的日誌發現，Android的OnPageFinished事件會在Javascript指令碼執行完成之後才會觸發。如果在頁面中使用JQuery，會在處理完DOM對象，執行完$(document).ready(function() {});事件自會後才會渲染並顯示頁面。如

可以看到在載入完最後一個JS指令碼之後，對DOM元素的渲染和處理就花了8秒，然後執行了AJAX方法載入外部頁面又花了2、3秒，最後才會觸發onPageFinished顯示頁面。再往後由於程式中設定了setBlockNetworkImage(false)，所以開始載入外部圖片。（如果不控制這個參數，圖片載入會在渲染期間下載。  綜上，由於JS指令碼的處理，造成了一張頁面開啟多花了10秒左右時間。而同樣的頁面在iPhone上卻是載入相當的快，顯示完頁面才會觸發指令碼的執行。（提示：如果使用JQueryMobile，更會慢得離譜）

要解決這個問題，就是想辦法讓瀏覽器消極式載入JS指令碼，但是Android的WebView控制項沒有這樣的參數。無法單獨阻塞JS指令碼，另外有個setBlockNetworkLoads，用了之後也無法實作類別似圖片的非同步載入的功能，頁面成了光板，連CSS也阻塞了。

就是這個問題困擾了很久，直到在做HTML照片牆時，由於setBlockNetworkImage在OnPageFinished之後才會釋放，導致在JS指令碼載入圖片過程中無法擷取圖片的高寬資訊，最後巧妙地通過$(document).ready(function() {setTimeout(func,10)});，成功將函數在onPageFinished之後運行。那麼延伸來想，是否可以將JS指令碼也用同樣的方式延遲載入呢？

答案是肯定的，在 http://wonko.com/post/painless_javascript_lazy_loading_with_lazyload可以找到JS指令碼消極式載入的第三方組件。

我改造了之前速度奇慢的介面，我所使用的核心JS代碼如下：

<script src="/css/j/lazyload-min.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8">  loadComplete() {    //instead of document.read();  }   function loadscript() {    LazyLoad.loadOnce([      '/css/j/jquery-1.6.2.min.js',      '/css/j/flow/jquery.flow.1.1.min.js',      '/css/j/min.js?v=2011100852'      ], loadComplete);  }  setTimeout(loadscript,10);</script>

 

就是混搭setTimeout和layzload，讓JS指令碼可以真正在onPageFinish之後執行。

最終執行的效果

可以看到非常顯著的改善，從onPageStarted到onPageFinished只用了2秒不到的時間，這個時間主要花在HTML和CSS渲染上。從介面上來看，就是一閃而過的網頁載入進度條，立即顯示CSS渲染過的頁面效果，然後再載入並執行JS指令碼，逐塊顯示需要通過AJAX擷取的資料。

綜上，解決Android載入WebView頁面慢的問題，不是Android程式員的事情，而是Web前端工程師的問題。如果您使用基於WebView的Android第三方殼工具（例如PhoneGap，可以通過這種方式改善UI介面的回應時間）。

發布這個解決方案，希望基於Web的用戶端解決方案能更上一層樓，讓HTML和原生App混搭或的純WebApp實現效果可以更理想，功德無量......