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实现效果能够更理想，功德无量......