WebView执行效率部分

Android 的 webview 是基于 webkit 内核,运行效果和 firefox 上差不多.

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 之间的互调.
   1)Java 调用 js 里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互性很强的事情,这种速度会让人疯掉的.而反过来就不一样了,js 去调 java 的方法,速度很快,基本上 40-50 毫秒一次.所以尽量用 js 调用 java 方法,而不是 java 去调用 js 函数.

   2)Java 调用 js 的函数,没有返回值,而 Js 调用 java 方法,可以有返回值.返回值可以是字符串,也可以是对象.如果是字符串,有个很讨厌的问题,第4点我会讲的.如果是对象,这个对象会被转换为 js 的对象,直接可以访问里面的方法.但是我不推荐 java 返回给 js 的是对象，除非是必须。因为 js 收到 java 返回的对象，会产生一些交换对象，而如果这些对象的数量增加到了 500 或 600 以上，程序就会出问题。所以尽量返回基本数据类型或者字符串.

   3)Js 调用 java 的方法,返回值如果是字符串,你会发现这个字符串是 native 的,不能对它进行一些修改操作,比如想对它 substr,取不到.怎么解决呢?转成 locale 的.使用 toLocaleString() 函数就可以了.不过这个函数的速度并不快,转化的字符串如果很多,将会很耗费时间.

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

    这个是整理别人的文章,贴上来供大家参考.