最近做的项目大量用到了 WebView,用网页来布局.Android 的 WebView 是基于 webkit 内核,不过他的运行效果和 firefox 上一模一样 ,所以写的时候都是先用 firefox 测试,测试 OK 了再放到程序里面看效果,基本上不会有什么问题.其实 android 的 WebView 跟 iphone 的 WebView 差不多,iphone 上的 WebView 比android上的强大多了 .
谈一下研究 WebView 的一些成果:
1、加载资源的速度不慢,但是资源多了,就很慢.图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ,一般都是 30ms 就 ok 了.如果一个页面上的资源很多,就很浪费时间.
2、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 框架.
3、网页和 Java 之间的互调.这个功能是 iphone 里面就有的,网上也有很多资料,可以告诉我们怎么做,这些都是很简单、很基本的 .我研究了一段时间 ,总结一下:
1Java 调用 js 里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互性很强的事情,这种速度会让人疯掉的 .而反过来就不一样了 , js 去调 java 的方法 ,速度很快 ,基本上 40-50 毫秒一次.所以尽量用 js调用 java 方法,而不是 java 去调用 js 函数.2Java 调用 js 的函数,没有返回值 ,而 Js 调用 java 方法,可以有返回值 .返回值可以是字符串 ,也可以是对象.如果是字符串,有个很讨厌的问题,第3 点我会讲的.如果是对象,这个对象会被转换为 js 的对象,直接可以访问里面的方法.但是我不推荐 java 返回给 js 的是对象,除非是必须.因为 js 收到 java 返回的对象,会产生一些交换对象,而如果这些对象的数量增加到了 500 或 600 以上,程序就会出问题 .所以尽量返回基本数据类型或者字符串. 3Js 调用 java 的方法,返回值如果是字符串 ,你会发现这个字符串是 native 的,不能对它进行一些修改操作,比如想对它 substr ,取不到 .怎么解决呢?转成 locale 的.使用 toLocaleString() 函数就可以了 .不过这个函数的速度并不快 ,转化的字符串如果很多 ,将会很耗费时间 .
4、网页上拖动元素.网页上有一个 div ,想要拖动它到另外一个地方,怎么做?如果用 PC 上的网页做法,监听onmousedown 、 onmousemove 和 onmouseup 就可以了 .但是在手机上 ,事件模型就不一样了 .在网页上点击 ,拖动,然后释放 ,手离开屏幕的时候 , WebView 才会触发 onmousedown 、 onmousemove 、 onmouseup 事件.所以 , 要想拖动 , 不能这么做 . 这个问题困扰我很长时间 , 后来发现 iphone 上的做法 , 才解决了 . Iphone 上的WebView 有专为触摸屏设计的事件 ontouchstart 、 ontouchmove 、 ontouchend ,这几个事件的响应是实时的 ,就能解决拖动的问题了 .
5、一些小问题. WebView 里面的网页,如果有 input ,需要输入,但是点上去却没反应,输入法不出来.这种情况是因为 WebView 没有获取焦点.需要在 java 里面给 WebView 设置一下 requestFocus() 就行了.
6、Android 上的 WebView 和 iphone 的 WebView 区别.目前为止,我发现的区别有这么几个:1Android 上,WebView 不支持多点触控,没有 ongesture 系列事件,而 iphone 上有.
2Android 上的 WebView 不支持透明, iphone 上可以
互联网 信息聚合网站 : www.yidin.net 聚合互联网最优质资源、协助设计、分享经验、提升自我 欢迎访问（投稿，招聘信息请入）
欢迎各位同学加入 android 技术二群 222392467