文档章节

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

Domineering
 Domineering
发布于 2015/01/23 11:56
字数 944
阅读 55
收藏 1

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

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

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


           
可以看到在载入完最后一个JS脚本之后,对DOM元素的渲染和处理就花了8秒,然后执行了AJAX方法载入外部页面又花了23秒,最后才会触发onPageFinished显示页面。再往后由于程序中设置了setBlockNetworkImage(false),所以开始载入外部图片。(如果不控制这个参数,图片载入会在渲染期间下载。  综上,由于JS脚本的处理,造成了一张页面打开多花了10秒左右时间。而同样的页面在iPhone上却是载入相当的快,显示完页面才会触发脚本的执行。(提示:如果使用JQueryMobile,更会慢得离谱)

         要解决这个问题,就是想办法让浏览器延迟加载JS脚本,但是AndroidWebView控件没有这样的参数。无法单独阻塞JS脚本,另外有个setBlockNetworkLoads,用了之后也无法实现类似图片的异步载入的功能,页面成了光板,连CSS也阻塞了。

         就是这个问题困扰了很久,直到在做HTML照片墙时,由于setBlockNetworkImageOnPageFinished之后才会释放,导致在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>

              

        就是混搭setTimeoutlayzload,让JS脚本可以真正在onPageFinish之后执行。

        最终执行的效果如图:


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

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

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

© 著作权归作者所有

Domineering
粉丝 7
博文 167
码字总数 50677
作品 0
深圳
私信 提问
WebBrowser(WebView) API (浏览器控件WebView)

一、WP8中的WebBrowser Windows Phone 提供基于桌面浏览器的 WebBrowser 控件。Windows Phone OS 7.1 的 WebBrowser 控件基于 Internet Explorer 9,且 Windows Phone 8 的 WebBrowser 控件基......

失足处男的倒霉孩子
2013/12/27
7.7K
0
android WebView详解

浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相对于微软的webbrowser,android及ios的webview的引擎...

amigos_wu
2012/06/25
9.4K
1
android WebView总结

浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相对于微软的webbrowser,android及ios的webview的引擎...

迷途d书童
2012/03/28
8.6K
1
Android:最全面的 Webview 详解

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图 那么这种该如何实现呢?其实这是Android里一个叫WebView的组件实现的。今天我将全面...

临江仙卜算子
2018/07/07
184
0
在 Flutter 中使用 WebView

本文示例代码可在微信公众号「01二进制」后台回复「WebView」查看下载 前言 我们知道在开发 Native App 时经常会有打开网页的需求,可供的选择通常只有两种: 在 App 内部打开网页 通过调用系...

雇个城管打天下
08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【2019年8月版本】OCP 071认证考试最新版本的考试原题-第5题

choose the best answer The CUSTOMERS table has a CUST_LAST_NAME column of data type VARCHAR2. The table has two rows whose COST_LAST_MANE values are Anderson and Ausson. Which q......

oschina_5359
38分钟前
3
0
电脑怎样制作流程图?分享绘制流程图方法

流程图的绘制可以用很多方法来实现,小编经常使用电脑对流程图进行绘制,即简单又便利,相信很多朋友都因为不知道怎样绘制流程图而选择了放弃,今天这篇文章希望可以让大家重拾绘制流程图的信...

干货趣分享
39分钟前
4
0
Elasticsearch 7.x 之文档、索引和 REST API 【基础入门篇】

前几天写过一篇《Elasticsearch 7.x 最详细安装及配置》,今天继续最新版基础入门内容。这一篇简单总结了 Elasticsearch 7.x 之文档、索引和 REST API。 什么是文档 文档Unique ID 文档元数据...

泥瓦匠BYSocket
43分钟前
5
0
TL665x-EasyEVM开发板处理器、flash、RAM

TL665x-EasyEVM是广州创龙基于SOM-TL665x核心板研发的一款TI C66x多核定点/浮点高性能DSP开发板,采用核心板+底板方式,底板尺寸为200mm*106.65mm,采用4*50pin和1*80pin B2B工业级连接器,稳...

Tronlong创龙
48分钟前
3
0
DevExpress Report-XRTable绑定数据

将从跳转前的页面(A)中获取传入的数据(dtOrd、BatchID、ModelID),绑定到Report报表对应的控件 ,代码如下: this.xrtBatchID.Text = sBatchID; this.xrtModel.Text ...

_Somuns
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部