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指令碼也用同樣的方式延遲載入呢？

         我改造了之前速度奇慢的介面，我所使用的核心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實現效果可以更理想，功德無量......