最近做的项目大量用到了 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 上可以。
暂时就能想到这么些,还有很多以后再补充吧。
相关推荐
1.WebView攻击⾯ 2.WebView配置与使⽤ 3.WebViewURL校验 4.WebView安全防御 5.总结 WebView已成为Android ...通过本演讲,开发者能了解到Android WebView最新的典型漏洞类型及其利用手法,从而获得安全编程方面的指南。
搜索很多资料后发现很多问题,都是关键代码片段,因为每个项目每个人产生的问题不同,Video在webview中加载不出来原因很多,可能是客户端少了参数,也可能是前端出了问题,经过研究后对Android WebView 加载H5Video...
Android WebViewJS应用源码.zip项目安卓应用源码下载Android WebViewJS应用源码.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
Android平台WebView组件安全及应用加固研究.pdf
android下研究webview使用本地网页与android系统组件(activity)交互,即java与javascript的交互。。。
最近总能看到好多APP都支持文章和网页的长截图,出于好奇研究了一下,分享给大家。 网上有好多的例子,其中好多都是已经过时的就不在复述了,我发现有一种还是比较通用的方法。 //android 5.0 之后需要开启浏览器...
方案是为解决特定问题或达成特定目标而制定的一系列计划或步骤。它的作用是提供一种系统性的方法,以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用: 问题解决: 方案的核心目标是解决问题。...
Android平台WebView组件安全及应用加固研究
浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview;本篇主要介绍android的webview之强大,感兴趣的朋友可以研究下
Android应用源码之webview重载使用&自定义网址.zip项目安卓应用源码下载Android应用源码之webview重载使用&自定义网址.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发...
Android Naive与WebView的互相调用详解 Android的Naive程序是可以嵌套WebView,并且可以做到与WebView的交互,一般来说有两种方法,一是...我们先研究一下Naive和WebView如何相互调用。 初始化: mWebView = (Web
背景:在写登录界面时,老板就觉得在输入密码的时候谈出来的输入法软键盘把登录按钮遮挡住了(入下图所示,不爽),连输入框都被挡了一半,于是不满意了,要叫我改,于是我看QQ的登录效果,我就去研究了一下,弹出...
Android应用源码之图片轮播(Viwepager)+(读取网络图片)+点击图片(WebView)展项目安卓应用源码下载示.zAndroid应用源码之图片轮播(Viwepager)+(读取网络图片)+点击图片(WebView)展项目安卓应用源码下载示.z ...
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同...
android用户界面之WebView教程实例汇总 android用户界面之GridView教程实例汇总 android用户界面之SurfaceView教程实例汇总 android用户界面之Notification教程实例汇总 android用户界面之TextView教程实例汇总 ...
功能非常强大的Flutter浏览器插件,支持非常多的事件监听,JS和flutt 全代码开源,放心下载 在开发WEB界面展示不二选择。 值得深入学习研究
杨丰盛,Android应用开发先驱,对Android有深入研究,实战经验极其丰富。精通Java、C、C++等语言,专注于移动通信软件开发,在机顶盒软件开发和MTK平台软件开发方面有非常深厚的积累。2007年获得中国软件行业协会...
后来就去研究一下该怎么实现,顺便整理了一下。 WebView基本配置 mWvContent.getSettings().setJavaScriptEnabled(true); mWvContent.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); mWvContent....
搜索之后使用intent跳转,当然也可以用android自带的webview组件实现。 不足的地方是没有动态的显示/隐藏效果,看起来比较生硬,跟原版效果的有一定的差距。 希望对大家有所帮助,UI设计方面大家一起进步!
主要包括:Chrome、Firefox、Safari、Android WebView、腾讯 Android X5 内核(QQ、微信);不支持:UC 系内核(典型的支付宝,大部分国产手机厂商的浏览器),IOS 上除 Safari 外的其他任何形式的浏览器(含 研究方法...