专栏首页封碎Android的webview研究

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 上可以。

暂时就能想到这么些,还有很多以后再补充吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android画图之Matrix(一) 博客分类: Android AndroidBlog

    Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放、平移、旋转等操作。

    chroya
  • Android开发减少方法数的建议 博客分类: Android小技巧 方法数android

         现在的Android应用越来越庞大,开发者越来越能感受到方法数限制带来的影响。这里简单讲几个减少方法数的小建议。

    chroya
  • 为什么人生气时说话用喊的 博客分类: 经典文章转载 .netBlog

    所有的学生都想了很久,其中有一个学生说:“因为我们丧失了冷静,所以我们会用喊的。”

    chroya
  • Vue.js前后端同构方案之准备篇:代码优化

    目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术。此篇是准备篇,工欲善其事,必先利其器。我们先在代码层面进行优化,对我们完成整个技...

    王鹤
  • 百度熊掌号折腾手记(二)chrome控制台报警告性错误。

    自从上次部署完熊掌号之后,就没在管过了,发的几篇文章有收录的有没收录的。前两天小伙伴们在博客112群里说页面加了熊掌号后会在chrome中报警告性错误。网上也都...

    世纪访客
  • 基于Tensorflow.js实现浏览器级别的目标识别应用实践

    tensorflow.js 是谷歌于今年推出的浏览器级别的深度学习框架,TensorFlow 团队在其github官网上也公开了表示基于网页的 JavaScri...

    sparkexpert
  • 安全扫描工具WVS Console版v1.1

    由于工作关系,也与近期极度无聊有关,为此用批处理写了关于WVS的简便Console版工具(自然需要安装WVS) 首先,运行试试看吧。第一次运行可能会出现这个提示...

    FB客服
  • 动手实现一个简易的webpack

    npm install --dev-save @babel/core @babel/preset-env @babel/traverse babylon mag...

    疯狂的技术宅
  • EasyNVS出现“请求服务不存在或已停止”

    传统的安防监控直播一般都是存在于内网,网络、播放客户端都是实际使用中存在的瓶颈问题,针对这些问题,咱们推出了EasyNVR+EasyNVS方案,在保证传统安防功...

    EasyNVR
  • 让Google chrome支持迅雷

    能够将页面里的迅雷,快车Flashget,旋风链接替换为真实地址,但是如果要点击实现自动打开迅雷下载,还要装一个插件:迅雷的NPThunder.dll,放在ch...

    贰师兄TEN

扫码关注云+社区

领取腾讯云代金券