Android的webview研究 收藏

轉(zhuǎn)載自：http://chroya./blog/667116,，感謝chroya,！

-----------------------------------------------------------------------------------------------------------------------------------------------------

最近做的項(xiàng)目大量用到了 webview ，用網(wǎng)頁來布局,。 Android 的 webview 是基于 webkit 內(nèi)核,，不過他的運(yùn)行效果和 firefox 上一模一樣，所以寫的時(shí)候都是先用 firefox 測(cè)試,，測(cè)試 OK 了再放到程序里面看效果,，基本上不會(huì)有什么問題。其實(shí) android 的 webview 跟 iphone 的 webview 差不多,， iphone 上的 webview 比android 上的強(qiáng)大多了,。

談一下研究 webview 的一些成果：

 

一．    加載資源的速度不慢,，但是資源多了，就很慢,。圖片,、 css 、 js ,、 html 這些資源每個(gè)大概需要 10-200ms ,，一般都是 30ms 就 ok 了。如果一個(gè)頁面上的資源很多,，就很浪費(fèi)時(shí)間,。

 

二．    Js 和 css 的執(zhí)行速度。開始的時(shí)候,，我的頁面都是用 js 生成 DOM ，添加樣式等也用 js 添加,。后來發(fā)現(xiàn),，加載一個(gè)頁面居然要 5-6 秒。然后我就懷疑是不是 js 的執(zhí)行效率不高,，然后就把能用 css 的地方都用 css ,，能直接寫到 html 上的就不用 js 動(dòng)態(tài)生成。結(jié)果,，速度并沒有多大的提升,，最多提升了 1 秒?？磥?， Js 的執(zhí)行速度雖然比不上 css ，但是還不至于慢到那種程度,。那會(huì)是什么原因使得頁面加載速度這么慢,？經(jīng)過仔細(xì)的排查，最終發(fā)現(xiàn),，是因?yàn)槲矣昧?jQuery 框架,。

Webview 加載頁面的順序是這樣的：先加載 html ，然后從里面解析出 css ,、 js 文件和頁面上寫死的圖片資源進(jìn)行加載,，如果 webkit 的緩存里面有，就不加載,。加載完這些資源之后,，就進(jìn)行 css 的渲染和 js 的執(zhí)行。 Css 的渲染一般不需要很長(zhǎng)時(shí)間,，幾十毫秒就 ok ,。關(guān)鍵是 js 的執(zhí)行,，如果用了 jQuery ，則執(zhí)行起來需要 5-6 秒,。而在這段時(shí)間,，如果不在 webview 里設(shè)置背景，網(wǎng)頁部分是白色的,，很難看,。這是一個(gè)很糟糕的用戶體驗(yàn)。所以如果用網(wǎng)頁布局程序,，最好別用很大的 js 框架,。

 

三．     網(wǎng)頁和 Java 之間的互調(diào)。這個(gè)功能是 iphone 里面就有的,，網(wǎng)上也有很多資料,，可以告訴我們?cè)趺醋觯@些都是很簡(jiǎn)單,、很基本的,。我研究了一段時(shí)間，總結(jié)一下：

 1．  Java 調(diào)用 js 里面的函數(shù),，速度并不令人滿意,，大概一次一兩百毫秒吧，如果要做交互性很強(qiáng)的事情,，這種速度會(huì)讓人瘋掉的,。而反過來就不一樣了， js 去調(diào) java 的方法,，速度很快,，基本上 40-50 毫秒一次。所以盡量用 js 調(diào)用 java 方法,，而不是 java 去調(diào)用 js 函數(shù),。

 2．  Java 調(diào)用 js 的函數(shù)，沒有返回值,，而 Js 調(diào)用 java 方法,，可以有返回值。返回值可以是字符串,，也可以是對(duì)象,。如果是字符串，有個(gè)很討厭的問題,，第 3 點(diǎn)我會(huì)講的,。如果是對(duì)象，這個(gè)對(duì)象會(huì)被轉(zhuǎn)換為 js 的對(duì)象，直接可以訪問里面的方法,。但是我不推薦 java 返回給 js 的是對(duì)象,，除非是必須。因?yàn)?js 收到 java 返回的對(duì)象,，會(huì)產(chǎn)生一些交換對(duì)象,，而如果這些對(duì)象的數(shù)量增加到了 500 或 600 以上，程序就會(huì)出問題,。所以盡量返回基本數(shù)據(jù)類型或者字符串,。

3．  Js 調(diào)用 java 的方法，返回值如果是字符串,，你會(huì)發(fā)現(xiàn)這個(gè)字符串是 native 的,，不能對(duì)它進(jìn)行一些修改操作，比如想對(duì)它 substr ,，取不到,。怎么解決呢？轉(zhuǎn)成 locale 的,。使用 toLocaleString() 函數(shù)就可以了,。不過這個(gè)函數(shù)的速度并不快，轉(zhuǎn)化的字符串如果很多,，將會(huì)很耗費(fèi)時(shí)間。

 

 

四．        網(wǎng)頁上拖動(dòng)元素,。網(wǎng)頁上有一個(gè) div ,，想要拖動(dòng)它到另外一個(gè)地方，怎么做,？如果用 PC 上的網(wǎng)頁做法,，監(jiān)聽 onmousedown 、 onmousemove 和 onmouseup 就可以了,。但是在手機(jī)上,，事件模型就不一樣了。在網(wǎng)頁上點(diǎn)擊,，拖動(dòng),，然后釋放，手離開屏幕的時(shí)候,， webview 才會(huì)觸發(fā) onmousedown ,、 onmousemove 、 onmouseup 事件,。所以,，要想拖動(dòng)，不能這么做,。這個(gè)問題困擾我很長(zhǎng)時(shí)間,，后來發(fā)現(xiàn) iphone 上的做法,，才解決了。 Iphone 上的 webview 有專為觸摸屏設(shè)計(jì)的事件 ontouchstart ,、 ontouchmove ,、 ontouchend ，這幾個(gè)事件的響應(yīng)是實(shí)時(shí)的,，就能解決拖動(dòng)的問題了,。

 

五．        一些小問題。 Webview 里面的網(wǎng)頁,，如果有 input ,，需要輸入，但是點(diǎn)上去卻沒反應(yīng),，輸入法不出來,。這種情況是因?yàn)?webview 沒有獲取焦點(diǎn)。需要在 java 里面給 webview 設(shè)置一下 requestFocus() 就行了,。

 

六．        Android 上的 webview 和 iphone 的 webview 區(qū)別,。目前為止，我發(fā)現(xiàn)的區(qū)別有這么幾個(gè)：

1 ． Android 上,， webview 不支持多點(diǎn)觸控,，沒有 ongesture 系列事件，而 iphone 上有,。

      2 ． Android 上的 webview 不支持透明,， iphone 上可以

linc：webview的詳細(xì)情況請(qǐng)看sdk文檔，

這里還有一個(gè)簡(jiǎn)單的例子在http://www./Ferrari4000/archive/2009/03/14/259729.html

 

本文來自CSDN博客,，轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://blog.csdn.net/lincyang/archive/2010/09/28/5911488.aspx