Android客戶端中混搭HTML頁面，會出現(xiàn)雖然HTML內(nèi)容載入完成，標(biāo)題也正常顯示，但是整個(gè)網(wǎng)頁需要等到近5秒（甚至更多）時(shí)間才會顯示出來。研究了很久，搜遍了國外很多網(wǎng)站，也看過PhoneGap的代碼，一直無解。
一般人堆WebView的加速，都是建議先用 webView.getSettings().setBlockNetworkImage(true); 將圖片下載阻塞，然后在瀏覽器的OnPageFinished事件中設(shè)置 webView.getSettings().setBlockNetworkImage(false); 通過圖片的延遲載入，讓網(wǎng)頁能更快地顯示。
但是，通過實(shí)際的日志發(fā)現(xiàn)，Android的OnPageFinished事件會在Javascript腳本執(zhí)行完成之后才會觸發(fā)。如果在頁面中使 用JQuery，會在處理完DOM對象，執(zhí)行完$(document).ready(function() {});事件自會后才會渲染并顯示頁面。如下圖
可以看到在載入完最后一個(gè)JS腳本之后，對DOM元素的渲染和處理就花了8秒，然后執(zhí)行了AJAX方法載入外部頁面又花了2、3秒，最后才會觸發(fā) onPageFinished顯示頁面。再往后由于程序中設(shè)置了setBlockNetworkImage(false)，所以開始載入外部圖片。（如果 不控制這個(gè)參數(shù)，圖片載入會在渲染期間下載。 綜上，由于JS腳本的處理，造成了一張頁面打開多花了10秒左右時(shí)間。而同樣的頁面在iPhone上卻是載入相當(dāng)?shù)目?，顯示完頁面才會觸發(fā)腳本的執(zhí) 行。（提示：如果使用JQueryMobile，更會慢得離譜）
要解決這個(gè)問題，就是想辦法讓瀏覽器延遲加載JS腳本，但是Android的WebView控件沒有這樣的參數(shù)。無法單獨(dú)阻塞JS腳本，另外有個(gè)setBlockNetworkLoads，用了之后也無法實(shí)現(xiàn)類似圖片的異步載入的功能，頁面成了光板，連CSS也阻塞了。
就是這個(gè)問題困擾了很久，直到在做HTML照片墻時(shí)，由于setBlockNetworkImage在OnPageFinished之后才會釋放， 導(dǎo)致在JS腳本載入圖片過程中無法獲取圖片的高寬信息，最后巧妙地通過$(document).ready(function() {setTimeout(func,10)});，成功將函數(shù)在onPageFinished之后運(yùn)行。那么延伸來想，是否可以將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之后執(zhí)行。
最終執(zhí)行的效果如圖：
可以看到非常顯著的改善，從onPageStarted到onPageFinished只用了2秒不到的時(shí)間，這個(gè)時(shí)間主要花在HTML和CSS渲 染上。從界面上來看，就是一閃而過的網(wǎng)頁載入進(jìn)度條，立即顯示CSS渲染過的頁面效果，然后再載入并執(zhí)行JS腳本，逐塊顯示需要通過AJAX獲取的數(shù)據(jù)。
綜上，解決Android載入WebView頁面慢的問題，不是Android程序員的事情，而是Web前端工程師的問題。如果您使用基于WebView的Android第三方殼工具（例如PhoneGap，可以通過這種方式改善UI界面的響應(yīng)時(shí)間）。
發(fā)布這個(gè)解決方案，希望基于Web的客戶端解決方案能更上一層樓，讓HTML和原生App混搭或的純WebApp實(shí)現(xiàn)效果可以更理想
