Android的webview研究 收藏
-----------------------------------------------------------------------------------------------------------------------------------------------------
最近做的項(xiàng)目大量用到了 webview ，用網(wǎng)頁(yè)來(lái)布局。 Android 的 webview 是基于 webkit 內(nèi)核，不過(guò)他的運(yùn)行效果和 firefox 上一模一樣，所以寫(xiě)的時(shí)候都是先用 firefox 測(cè)試，測(cè)試 OK 了再放到程序里面看效果，基本上不會(huì)有什么問(wèn)題。其實(shí) android 的 webview 跟 iphone 的 webview 差不多， iphone 上的 webview 比android 上的強(qiáng)大多了。
談一下研究 webview 的一些成果：
一． 加載資源的速度不慢，但是資源多了，就很慢。圖片、 css 、 js 、 html 這些資源每個(gè)大概需要 10-200ms ，一般都是 30ms 就 ok 了。如果一個(gè)頁(yè)面上的資源很多，就很浪費(fèi)時(shí)間。
二． Js 和 css 的執(zhí)行速度。開(kāi)始的時(shí)候，我的頁(yè)面都是用 js 生成 DOM ，添加樣式等也用 js 添加。后來(lái)發(fā)現(xiàn)，加載一個(gè)頁(yè)面居然要 5-6 秒。然后我就懷疑是不是 js 的執(zhí)行效率不高，然后就把能用 css 的地方都用 css ，能直接寫(xiě)到 html 上的就不用 js 動(dòng)態(tài)生成。結(jié)果，速度并沒(méi)有多大的提升，最多提升了 1 秒?？磥?lái)， Js 的執(zhí)行速度雖然比不上 css ，但是還不至于慢到那種程度。那會(huì)是什么原因使得頁(yè)面加載速度這么慢？經(jīng)過(guò)仔細(xì)的排查，最終發(fā)現(xiàn)，是因?yàn)槲矣昧?jQuery 框架。
Webview 加載頁(yè)面的順序是這樣的：先加載 html ，然后從里面解析出 css 、 js 文件和頁(yè)面上寫(xiě)死的圖片資源進(jìn)行加載，如果 webkit 的緩存里面有，就不加載。加載完這些資源之后，就進(jìn)行 css 的渲染和 js 的執(zhí)行。 Css 的渲染一般不需要很長(zhǎng)時(shí)間，幾十毫秒就 ok 。關(guān)鍵是 js 的執(zhí)行，如果用了 jQuery ，則執(zhí)行起來(lái)需要 5-6 秒。而在這段時(shí)間，如果不在 webview 里設(shè)置背景，網(wǎng)頁(yè)部分是白色的，很難看。這是一個(gè)很糟糕的用戶(hù)體驗(yàn)。所以如果用網(wǎng)頁(yè)布局程序，最好別用很大的 js 框架。
三． 網(wǎng)頁(yè)和 Java 之間的互調(diào)。這個(gè)功能是 iphone 里面就有的，網(wǎng)上也有很多資料，可以告訴我們?cè)趺醋?，這些都是很簡(jiǎn)單、很基本的。我研究了一段時(shí)間，總結(jié)一下：
1． Java 調(diào)用 js 里面的函數(shù)，速度并不令人滿(mǎn)意，大概一次一兩百毫秒吧，如果要做交互性很強(qiáng)的事情，這種速度會(huì)讓人瘋掉的。而反過(guò)來(lái)就不一樣了， js 去調(diào) java 的方法，速度很快，基本上 40-50 毫秒一次。所以盡量用 js 調(diào)用 java 方法，而不是 java 去調(diào)用 js 函數(shù)。
2． Java 調(diào)用 js 的函數(shù)，沒(méi)有返回值，而 Js 調(diào)用 java 方法，可以有返回值。返回值可以是字符串，也可以是對(duì)象。如果是字符串，有個(gè)很討厭的問(wèn)題，第 3 點(diǎn)我會(huì)講的。如果是對(duì)象，這個(gè)對(duì)象會(huì)被轉(zhuǎn)換為 js 的對(duì)象，直接可以訪問(wèn)里面的方法。但是我不推薦 java 返回給 js 的是對(duì)象，除非是必須。因?yàn)?js 收到 java 返回的對(duì)象，會(huì)產(chǎn)生一些交換對(duì)象，而如果這些對(duì)象的數(shù)量增加到了 500 或 600 以上，程序就會(huì)出問(wèn)題。所以盡量返回基本數(shù)據(jù)類(lèi)型或者字符串。
3． Js 調(diào)用 java 的方法，返回值如果是字符串，你會(huì)發(fā)現(xiàn)這個(gè)字符串是 native 的，不能對(duì)它進(jìn)行一些修改操作，比如想對(duì)它 substr ，取不到。怎么解決呢？轉(zhuǎn)成 locale 的。使用 toLocaleString() 函數(shù)就可以了。不過(guò)這個(gè)函數(shù)的速度并不快，轉(zhuǎn)化的字符串如果很多，將會(huì)很耗費(fèi)時(shí)間。
四． 網(wǎng)頁(yè)上拖動(dòng)元素。網(wǎng)頁(yè)上有一個(gè) div ，想要拖動(dòng)它到另外一個(gè)地方，怎么做？如果用 PC 上的網(wǎng)頁(yè)做法，監(jiān)聽(tīng) onmousedown 、 onmousemove 和 onmouseup 就可以了。但是在手機(jī)上，事件模型就不一樣了。在網(wǎng)頁(yè)上點(diǎn)擊，拖動(dòng)，然后釋放，手離開(kāi)屏幕的時(shí)候， webview 才會(huì)觸發(fā) onmousedown 、 onmousemove 、 onmouseup 事件。所以，要想拖動(dòng)，不能這么做。這個(gè)問(wèn)題困擾我很長(zhǎng)時(shí)間，后來(lái)發(fā)現(xiàn) iphone 上的做法，才解決了。 Iphone 上的 webview 有專(zhuān)為觸摸屏設(shè)計(jì)的事件 ontouchstart 、 ontouchmove 、 ontouchend ，這幾個(gè)事件的響應(yīng)是實(shí)時(shí)的，就能解決拖動(dòng)的問(wèn)題了。
五． 一些小問(wèn)題。 Webview 里面的網(wǎng)頁(yè)，如果有 input ，需要輸入，但是點(diǎn)上去卻沒(méi)反應(yīng)，輸入法不出來(lái)。這種情況是因?yàn)?webview 沒(méi)有獲取焦點(diǎn)。需要在 java 里面給 webview 設(shè)置一下 requestFocus() 就行了。
六． Android 上的 webview 和 iphone 的 webview 區(qū)別。目前為止，我發(fā)現(xiàn)的區(qū)別有這么幾個(gè)：
1 ． Android 上， webview 不支持多點(diǎn)觸控，沒(méi)有 ongesture 系列事件，而 iphone 上有。
2 ． Android 上的 webview 不支持透明， iphone 上可以
linc：webview的詳細(xì)情況請(qǐng)看sdk文檔，
