Android的webview研究

轉載自：http://chroya.javaeye.com/blog/667116，感謝chroya！

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

最近做的項目大量用到了 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 以上，程式就會出問題。所以盡量返回基礎資料型別 (Elementary Data Type)或者字串。

3．  Js 調用 java 的方法，傳回值如果是字串，你會發現這個字串是 native 的，不能對它進行一些修改操作，比如想對它 substr ，取不到。怎麼解決呢？轉成 locale 的。使用 toLocaleString() 函數就可以了。不過這個函數的速度並不快，轉化的字串如果很多，將會很耗費時間。

 

 

 

四．        網頁上拖動元素。網頁上有一個 div ，想要拖動它到另外一個地方，怎麼做？如果用 PC 上的網頁做法，監聽 onmousedown 、 onmousemove 和 onmouseup 就可以了。但是在手機上，事件模型就不一樣了。在網頁上點擊，拖動，然後釋放，手離開螢幕的時候， webview 才會觸發 onmousedown 、 onmousemove 、 onmouseup 事件。所以，要想拖動，不能這麼做。這個問題困擾我很長時間，後來發現 iphone 上的做法，才解決了。 Iphone 上的 webview 有專為觸控螢幕設計的事件 ontouchstart 、 ontouchmove 、 ontouchend ，這幾個事件的響應是即時的，就能解決拖動的問題了。

 

五．        一些小問題。 Webview 裡面的網頁，如果有 input ，需要輸入，但是點上去卻沒反應，IME不出來。這種情況是因為 webview 沒有擷取焦點。需要在 java 裡面給 webview 設定一下 requestFocus() 就行了。

 

六．        Android 上的 webview 和 iphone 的 webview 區別。目前為止，我發現的區別有這麼幾個：

1 ． Android 上， webview 不支援多點觸控，沒有 ongesture 系列事件，而 iphone 上有。

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