Android的WebView控件載入網頁顯示速度慢的究極解決方案

Android的WebView控件載入網頁顯示速度慢的究極解決方案

       【轉載來源自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實現效果能夠更理想，功德無量......