【轉載來源自http://hi.baidu.com/goldchocobo/】
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實現效果可以更理想，功德無量......