Android客户端中混搭HTML页面，会出现虽然HTML内容载入完成，标题也正常显示，但是整个网页需要等到近秒(甚至更多)时间才会显示出来。研究了很久，搜遍了国外很多网站，也看过PhoneGap的代码，一直无解。

一般人堆WebView的加速，都是建议先用webView.getSettings().setBlockNetworkImage(true); 将图片下载阻塞，然后在浏览器的OnPageFinished事件中设置webView.getSettings().setBlockNetworkImage(false); 通过图片的延迟载入，让网页能更快地显示。

但是，通过实际的日志发现，Android的OnPageFinished事件会在Javascript脚本执行完成之后才会触发。如果在页面中使用JQuery，会在处理完DOM对象，执行完$(document).ready(function() {});事件自会后才会渲染并显示页面。如下图

可以看到在载入完最后一个JS脚本之后，对DOM元素的渲染和处理就花了秒，然后执行了AJAX方法载入外部页面又花了、秒，最后才会触发onPageFinished显示页面。再往后由于程序中设置了setBlockNetworkImage(false)，所以开始载入外部图片。(如果不控制这个参数，图片载入会在渲染期间下载。  综上，由于JS脚本的处理，造成了一张页面打开多花了秒左右时间。而同样的页面在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代码如下：

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);

就是混搭setTimeout和layzload，让JS脚本可以真正在onPageFinish之后执行。

最终执行的效果如图：

可以看到非常显著的改善，从onPageStarted到onPageFinished只用了秒不到的时间，这个时间主要花在HTML和CSS渲染上。从界面上来看，就是一闪而过的网页载入进度条，立即显示CSS渲染过的页面效果，然后再载入并执行JS脚本，逐块显示需要通过AJAX获取的数据。

综上，解决Android载入WebView页面慢的问题，不是Android程序员的事情，而是Web前端工程师的问题。如果您使用基于WebView的Android第三方壳工具(例如PhoneGap，可以通过这种方式改善UI界面的响应时间)。

发布这个解决方案，希望基于Web的客户端解决方案能更上一层楼，让HTML和原生APP混搭或的纯WEBAPP实现效果可以更理想，功德无量......

Android的WebView控件载入网页显示速度慢的究极解决方案

Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] 秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国 ...

Android学习笔记50：使用WebView控件浏览网页

在Android中,可以使用Webview控件来浏览网页.通过使用该控件,我们可以自制一个简单的浏览器,运行效果如图1所示. 图1 运行效果 1.WebView 在使用WebView控件时,首先需要在 ...

通过webview控件访问网页

初学android开发,在界面编辑器上放了一个webview控件,可惜不知道如何访问控件,在网上看到一段代码记录下来,算是第一次学习笔记. 要想让程序联网需要授权,在AndroidManifest.x ...

修复android下webView控件的总结

游戏中有一个收集玩家问题反馈的网页,很早之前就有同事反映说android在游戏无法上传附件,在浏览器中是可以正常使用的.最近能腾出手来的时候,就仔细看了一下这个问题,发现很里藏着不少问题,这里一一记录 ...

Android 使用WebView控件展示SVG图

1.添加布局界面代码:

android 调用webview控件，为逆向h5app做准备

activity对应layout文件加入:

C++ CRTP singleton

C++ CRTP 是个很有意思的东西,因为解释原理的文章很多,但是讲怎么用的就不是很多了. 今天就稍微写下CRTP(奇异递归模板模式)的一个有趣的用法:Singleton(单例模式) 单例有很多中写法 ...

ES6 对象的扩展(上)

属性的简介表示法 允许直接写入变量和函数作为对象的属性和方法,这样的书写更简洁. function f( x, y ) { return { x, y }; } // 等同于 function f( ...

11-jQuery的事件绑定和解绑

1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...

ubuntu安装mysql 时未提示输入密码

我在Ubuntu16.04版本中使用终端安装MySQL5.7时,按照度娘的教程,搜索如何安装,大多是如下代码: sudo apt-get install mysql-server sudo apt-g ...

RNA测序相对基因表达芯片有什么优势？

RNA测序相对基因表达芯片有什么优势? RNA-Seq和基因表达芯片相比,哪种方法更有优势?关键看适用不适用.那么RNA-Seq适用哪些研究方向?是否您的研究?来跟随本文了解一下RNA测序相对基因表达 ...

API网关的设计思路及落地 IT大咖说 - 大咖干货，不再错过

API网关的设计思路及落地 IT大咖说 - 大咖干货,不再错过   http://www.itdks.com/dakashuo/new/dakalive/detail/1407