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

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

相关推荐