`

Android的webview研究

阅读更多
最近做的项目大量用到了 webview ,用网页来布局。 Android 的 webview 是基于 webkit 内核,不过他的运行效果和 firefox 上一模一样,所以写的时候都是先用 firefox 测试,测试 OK 了再放到程序里面看效果,基本上不会有什么问题。其实 android 的 webview 跟 iphone 的 webview 差不多, iphone上的 webview 比 android 上的强大多了。
谈一下研究 webview 的一些成果:

一、加载资源的速度不慢,但是资源多了,就很慢。图片、 css 、 js 、 html 这些资源每个大概需要10-200ms ,一般都是 30ms 就 ok 了。如果一个页面上的资源很多,就很浪费时间。

二、Js 和 css 的执行速度。开始的时候,我的页面都是用 js 生成 DOM ,添加样式等也用 js 添加。后来发现,加载一个页面居然要 5-6 秒。然后我就怀疑是不是 js 的执行效率不高,然后就把能用 css的地方都用 css ,能直接写到 html 上的就不用 js 动态生成。结果,速度并没有多大的提升,最多提升了 1 秒。看来, Js 的执行速度虽然比不上 css ,但是还不至于慢到那种程度。那会是什么原因使得页面加载速度这么慢?经过仔细的排查,最终发现,是因为我用了 jQuery 框架。
Webview 加载页面的顺序是这样的:先加载 html ,然后从里面解析出 css 、 js 文件和页面上写死的图片资源进行加载,如果 webkit 的缓存里面有,就不加载。加载完这些资源之后,就进行 css 的渲染和 js 的执行。 Css 的渲染一般不需要很长时间,几十毫秒就 ok 。关键是 js 的执行,如果用了jQuery ,则执行起来需要 5-6 秒。而在这段时间,如果不在 webview 里设置背景,网页部分是白色的,很难看。这是一个很糟糕的用户体验。所以如果用网页布局程序,最好别用很大的 js 框架。

三、网页和 Java 之间的互调。这个功能是 iphone 里面就有的,网上也有很多资料,可以告诉我们怎么做,这些都是很简单、很基本的。我研究了一段时间,总结一下:
  • 1.Java 调用 js 里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互性很强的事情,这种速度会让人疯掉的。而反过来就不一样了, js 去调 java 的方法,速度很快,基本上 40-50毫秒一次。所以尽量用 js 调用 java 方法,而不是 java 去调用 js 函数。
  • 2.Java 调用 js 的函数,没有返回值,而 Js 调用 java 方法,可以有返回值。返回值可以是字符串,也可以是对象。如果是字符串,有个很讨厌的问题,第 3 点我会讲的。如果是对象,这个对象会被转换为 js 的对象,直接可以访问里面的方法。但是我不推荐 java 返回给 js 的是对象,除非是必须。因为js 收到 java 返回的对象,会产生一些交换对象,而如果这些对象的数量增加到了 500 或 600 以上,程序就会出问题。所以尽量返回基本数据类型或者字符串。
  • 3.Js 调用 java 的方法,返回值如果是字符串,你会发现这个字符串是 native 的,不能对它进行一些修改操作,比如想对它 substr ,取不到。怎么解决呢?转成 locale 的。使用 toLocaleString() 函数就可以了。不过这个函数的速度并不快,转化的字符串如果很多,将会很耗费时间。


四、网页上拖动元素。网页上有一个 div ,想要拖动它到另外一个地方,怎么做?如果用 PC 上的网页做法,监听 onmousedown 、 onmousemove 和 onmouseup 就可以了。但是在手机上,事件模型就不一样了。在网页上点击,拖动,然后释放,手离开屏幕的时候, webview 才会触发onmousedown 、 onmousemove 、 onmouseup 事件。所以,要想拖动,不能这么做。这个问题困扰我很长时间,后来发现 iphone 上的做法,才解决了。 Iphone 上的 webview 有专为触摸屏设计的事件ontouchstart 、 ontouchmove 、 ontouchend ,这几个事件的响应是实时的,就能解决拖动的问题了。

五、一些小问题。 Webview 里面的网页,如果有 input ,需要输入,但是点上去却没反应,输入法不出来。这种情况是因为 webview 没有获取焦点。需要在 java 里面给 webview 设置一下requestFocus() 就行了。

六、Android 上的 webview 和 iphone 的 webview 区别。目前为止,我发现的区别有这么几个:
  • 1 、Android 上, webview 不支持多点触控,没有 ongesture 系列事件,而 iphone 上有。
  • 2 、Android 上的 webview 不支持透明, iphone 上可以。


暂时就能想到这么些,还有很多以后再补充吧。
分享到:
评论
2 楼 wcily123 2012-08-14  
NickRambo 写道
我想问下你是通过什么方法获得那些资源的下载和加载时间的??



因为最近研究的方向不在这块,我给你两个参考连接吧。你自己看看吧

http://www.baiduux.com/blog/2011/02/15/browser-loading/
http://www.w3.org/TR/navigation-timing/
1 楼 NickRambo 2012-07-24  
我想问下你是通过什么方法获得那些资源的下载和加载时间的??

相关推荐

    Android webview加载网页.zip

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序内部加载和显示网页内容...对于“8.webview加载网页”这个文件,可能是具体实现这些功能的代码示例,进一步深入研究将有助于加深对WebView的理解。

    android webview 因iframe+target=“_blank “ 导致的页面无法正常打开或获取不到调整url

    在`TestWebview`这个测试项目中,我们可以深入研究这些问题,包括检查WebView的设置、网页的HTML结构以及JavaScript代码,以找出最佳的解决策略。这可能涉及到对WebView的配置进行调试,如启用JavaScript支持,设置...

    Android Webview 加载 H5Video

    搜索很多资料后发现很多问题,都是关键代码片段,因为每个项目每个人产生的问题不同,Video在webview中加载不出来原因很多,可能是客户端少了参数,也可能是前端出了问题,经过研究后对Android WebView 加载H5Video...

    android webview开发应用

    这个“android webview开发应用”显然提供了相关的源代码,为开发者提供了一个学习和研究的实例。以下是一些关于Android WebView开发的关键知识点: 1. **WebView介绍**:WebView是Android SDK中的一个类,它继承自...

    Android WebViewJS应用源码.zip

    通过研究这个`WebViewJS`源码,开发者可以了解到如何在实际应用中实现WebView与JavaScript的通信,以及如何处理相关的安全问题。对于想要提升Android应用功能和用户体验的开发者来说,这是一个很好的学习资源。

    Android中WebView播放网上视频,横竖屏切换

    在Android应用开发中,WebView是一个非常重要的组件,它允许开发者在应用程序内嵌入网页内容,实现与...在`webView_test`这个项目中,开发者已经提供了一个示例,可以下载并研究其代码,以更好地理解这些概念和实践。

    android webview jbox2d 源代码 项目源码

    在Android开发中,Webview是一个非常重要的组件,它允许开发者在应用程序中嵌入网页内容,实现与网页的交互。...通过对源代码的深入研究,可以掌握这两项技术的结合使用,为你的Android开发带来更多的可能性。

    androidWebView.pdf

    ### Android WebView:融合原生与Web的桥梁 ...无论是用于简化应用开发流程,还是增强用户体验,`WebView`都是值得深入研究和掌握的核心组件。希望本文能为您的Android应用开发之旅带来新的灵感和实践指导。

    Android中WebView返回到上一个网页

    在Android应用开发中,WebView是一个非常重要的组件,它允许开发者在应用程序内嵌入网页内容,实现类似浏览器的功能。WebView能够加载HTML、CSS、...这些更高级的功能可以通过进一步研究WebView的相关API和特性来实现。

    在android的webview中实现websocket通信

    "AndroidWebView中实现WebSocket通信" 在 Android 的 WebView 中实现 WebSocket 通信是当前移动端应用开发中的一个热门话题。WebSocket 是 HTML5 规范中的一项技术,可以实现客户端与服务器之间的实时双向通信。在...

    Android webview代码示例

    通过研究这些代码示例,开发者可以更好地理解`WebView`在实际应用中的各种用法,并在自己的项目中灵活运用。`WebView`是一个强大且功能丰富的组件,熟练掌握其使用技巧对Android开发者来说至关重要。

    一个android的webview的例子

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容,实现与网页的交互。...通过深入研究和实践,开发者可以掌握在Android应用中集成网页内容的技巧,提升应用的功能性和用户体验。

    Android webview 搜索框

    在Android应用开发中,WebView是一个非常重要的组件,它允许开发者在应用程序内嵌入网页内容,实现类似浏览器的功能。...通过研究这些资源,你可以深入学习和掌握Android WebView与搜索框的结合使用。

    安卓浏览器WebViewJSHTML5相关-androidwebview加载本地html.zip

    本压缩包"安卓浏览器WebViewJSHTML5相关-androidwebview加载本地html.zip"提供了关于如何在Android中使用WebView加载本地HTML文件的相关示例和资料。 首先,我们要理解WebView的基本用法。在Android中,WebView是`...

    android webview 顶部进度条+旋转等待dialog例子

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容。当我们加载一个网页时,尤其是在网络状况不佳的情况下,用户可能需要等待一段时间,此时为了提供更好的用户体验,通常会显示...

    webView android 选择弹框

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容,实现与网页的交互。本文将深入探讨如何实现一个自定义的WebView文本选择弹框,以替代系统默认的样式,提供更个性化的用户体验...

    Android_WebView安全攻防指南2020.pdf

    在Android应用程序开发中,WebView是不可或缺的一部分,它允许在应用内部加载和显示网页内容。然而,WebView也成为了安全问题的重灾区,因为它可能被攻击者利用来实施各种攻击。以下是一份详细的Android WebView安全...

    Android源码——WebViewJS应用源码_new_21.7z

    在Android开发中,WebView是一个非常重要的组件,它允许开发者在应用程序内部嵌入一个网页浏览器,使得用户可以在不离开应用的情况下浏览网页内容。本资源“Android源码——WebViewJS应用源码_new_21.7z”显然是一个...

Global site tag (gtag.js) - Google Analytics