前不久，@豌豆實驗室發布了豌豆莢2.0版本，發布會后，InfoQ采訪到了軟件工程師范懷宇（@duguguiyu）和高級軟件工程師高雄（@Rock_gao），針對豌豆莢的技術特性和Webkit技術進行了采訪。本文將為您揭開豌豆莢2.0神秘的面紗，帶您走近“快速、簡單、有愛”的設計理念背后的技術故事：

InfoQ：豌豆莢2.0中使用到了HTML5技術，主要的應用場景有哪些，與Chrome有什么區別？

高雄：我們和Chrome最大的區別在于Chrome基于Chromium，它也是Webkit核心，它的Webkit核心上面對于HTML5的支持做得非常全面。但我們只是簡單基于Webkit來做的，這使得我們在HTML5支持上面會有一些難度，對HTML5支持也沒有Chrome那么全面。當我們的前端工程師需要HTML5支持時，我們會在Windows平臺上把HTML5支持添加上。比如說我們會實現HTML5的LocalStorage以及Notification這些特性。

范懷宇：在豌豆莢2.0中，收到短信時會出現一個彈出框，這就是利用HTML5的Notification機制實現的，與傳統Windows彈框不同，類似于Gmail中的彈出框。在詢問是否使用某種功能時，我們會將用戶的選擇通過LocalStorage來存儲，與傳統的方式相比，這種方法會高效很多。

InfoQ：豌豆莢是國內首家大規模使用Webkit技術開發的非瀏覽器軟件，你們怎么想到用這樣的一個技術，在選型時又做了哪些嘗試呢？

范懷宇：其實都會有所考量，我們也會去了解Chrome這樣的產品，它也是客戶端應用，而且加載頁面和繪制的速度都非常快，所以我們就認為這個技術用在其他軟件開發上也應該是可行的。

高雄：這正是豌豆莢區別于其他PC軟件的一個最重要的地方，我們雖然不是瀏覽器，而是一個PC上面的軟件，但是我們也會用到Webkit。這更體現出我們一個超前的意識，我們現在看Chrome或者是其他一些瀏覽器，對新技術的支持都越來越重視，比如像對HTML5的支持，對于其它PC上應用來說，可能以后就與HTML5分道揚鑣了。

InfoQ：主要用到了Webkit的哪些特性？能不能列舉三點。

高雄：在國內來講，我們對Webkit的應用還算比較深入。比如Webkit在Windows平臺上的Porting并不是特別完善，我們就將它的圖形庫換成了SKIA圖形庫，從而使得豌豆莢2.0在渲染的速度和渲染的效果上都會好很多 。 第二點，我們把Webkit原生的網絡庫換成了IE的網絡庫，這樣使得在豌豆莢2.0中我們可以復用IE緩存，同時這為豌豆莢2.0帶來了更快的加載速度。 第三點，我們為Webkit做了很多JS擴展，并開發了一個名為OneRing的架構。

InfoQ：在開發豌豆莢的產品研發中，遇到了哪些問題，這些問題是怎么解決的？

高雄：雖然Webkit對HTML5支持已非常完善，但也僅僅是在Safari或Chrome的平臺上。對于開發PC端軟件來說，Chrome和Safari都比較重。所以只有Webkit比較適合，但是Webkit在Windows上面的porting有相當大的難度，而且對HTML5支持也很有限，有很多HTML5功能都需要自己去實現，這是一個非常大的難度。

另外，對JS進行深入擴展也是一個難點，在擴展時，要遵循HTML5的標準去做，還要考慮如何來管理擴展出的JS對象，否則就會出現內存泄露，或是垃圾回收等一系列問題，這一點我們仍然在不斷地探索之中。

InfoQ：GECKO與Webkit比起來，有什么區別，為什么會選擇Webkit，而不用那個，那個技術是不是有一些局限性？在用Webkit過程中，有沒有哪些可以注意的技術細節？

高雄：首先回答第一個問題，為什么不用GECKO。GECKO的代碼，如果對它的內核不是了解得非常深入的話，看起來是非常困難的，加之它的可讀性也較差。此外，對CSS3、HTML4、HTML5標準的支持上，GECKO跟Webkit相比仍有一定差距。而且對舊標準支持上，比如CSS和HTML4，GECKO的得分都不是一百分，但Webkit是一百分，所以從標準支持上來說，顯然Webkit要比GECKO好得多。

其次，從整個內核的加載速度和解析的性能上來說，Webkit也是強于GECKO的。

第二個問題，Webkit是一個開源項目，國內用Webkit比較多的仍是一些瀏覽器公司，他們用Webkit主要作為一個仿IE內核一樣去用，就是做一些渲染或是網頁加載這樣的事情。但我覺得真正用Webkit，更重要的還是要分析它里面的一些基礎架構和機制，這樣的話，當我們在做PC軟件或是其他平臺軟件時，都會比較得心應手，這是我對想從事Webkit開發工作朋友的一點建議。 另外，Webkit項目每天大概有一百到二百個commit，如果對Webkit非常感興趣的話，我建議都花時間閱讀一下。并且最好保持Webkit每天的update，這也是非常重要的。

InfoQ：我覺得豌豆莢2.0一個很明顯的特點，就是速度非常快，包括很多用Webkit做內核的瀏覽器也是在追求速度，所以我想問一下，使用Webkit技術在提升速度方面，是有那些技巧可以簡單介紹一下。

高雄：我們的速度相比較Chrome來說可能會稍慢一點，我最近了解到Chrome有一個新的技術，叫SPDY，這項技術通過在網絡層使用新的機制來提升網絡傳輸速度，這點對于Chrome速度的影響非常大，提升的效率也很高。對于我們來說，我們目前還沒有引進這套技術，在速度提升方面主要表現在兩個方面，一個是我們在處理網絡傳輸時，會采用一些數據壓縮的處理。另外一點，通過緩存來提升速度，這是我們在改進網絡速度方面做的最重要兩點。 接下來我們想引進Chrome的SPDY技術，來進一步提升我們的速度。

InfoQ：剛才也提到了有一個開發框架，在不遠的將來會開源，能不能給我們介紹一下這個框架，這個框架主要是包含哪幾個部分，主要解決什么問題？

范懷宇：首先最重要的是OneRing，我們把Webkit擴展之后，能夠真正將Web開發放到Windows上來，Web開發工程師，可以完全寫純Web代碼，后面也可以運行。這整個實現部分，我們都會開源。 在Webkit方面我們也會有一些開源的舉措，這里面可能包含著我們對Webkit的擴展、改進，對HTML5的支持等等，最后的形式可能會是一個打包形式。 此外，我們還會把整個協議定義好，將接口事先都定義好，同時還有一些Windows的接口調用也要處理好，然后再將其開源。

InfoQ：咱們在OneRing的基礎上做了哪些改進？

范懷宇：最重要的是異步調用，原來是純同步的原理，但是當你真正做大型軟件時，就會立刻發現問題，這樣的方式是走不通的。然后還有線程安全，這樣做的目的是要保證數據是安全的。

InfoQ：咱們在1.0版的時候看過一個金山網絡的評測，關于幾款手機管理軟件會有一些安全方面的漏洞，豌豆莢2.0在安全上有哪些改進？

范懷宇：2.0最初的狀態不會有這個隱患的，包括我們在剛剛設計2.0的時候，就把安全放到了很重要的程度，PC連接手機之前，會通過通信協議來交換密鑰，交換密鑰成功后才會保持連接。當有一些錯誤密鑰出現時，手機會拒絕訪問，多次出現后，手機就不會給這個客戶端傳輸任何數據。在WIFI連接上，加強了密鑰輸入，在通訊的安全性上也做了很多事情。

InfoQ：從軟件方面，因為用戶從應用商店下載軟件，軟件會有一些漏洞之類的，當然軟件商店會有檢測，如果它沒有檢測好，用戶從咱們這兒下載了，可能也會對接到咱們這邊，對這方面的安全咱們會不會有過濾？

范懷宇：這方面的事情我們在1.0就做了，我們目前的一個解決方案是借助一些第三方專業的力量，比如說在1.0，如果你下一個應用，它會經過360掃描，QQ掃描，還有金山這樣的公司，我們會調用他們的掃描借口，把這些應用全部掃描一遍，然后告訴用戶這個東西在哪個掃描軟件下是不安全的，然后由用戶來決定是否繼續安裝。在2.0上我們會做更多這樣的事情，但我們畢竟不是安全廠商，做這方面沒有那么專業，所以目前的策略可能是通過合作的方式來解決這個問題。

InfoQ：咱們豌豆莢團隊在開發過程中遇到哪些問題，因為畢竟豌豆莢2.0經歷了十個月，可否為我們的技術愛好者分享一些你們在開發過程中遇到的一些比較有趣的問題。

范懷宇：早期我們碰到一個問題是數據的序列化和反序列化，這樣的過程會比較耗時，我們嘗試了很多種方案，從而將速度提升了很多倍，現在整個傳輸沒有任何問題了，我們也會用一些更高壓縮比的方法來解決傳輸問題。

在整個UI框架開發過程中，很多時候會面臨前端需要什么技術支持、Webkit需要定制的問題，加上Webkit還是個非常龐大的項目，隨時會有一些陷井在里面，加之我們也是在Webkit上不斷地嘗試，所以這一塊也耗費了我們很大的精力。

但是，整個框架真的是節省了我們很多時間，前端如此多的界面，還有很多復雜的效果，只有兩位前端工程師在做，高雄一個人在負責使用Webkit碰到的各種各樣的問題，真的說豌豆莢十個月，我們耗了很多精力是在后端，很多業務邏輯要處理得很細致，然后各種各樣的狀況。其實后端邏輯會是我們開發量最大的一部分，包括從手機上讀取各種數據，我們2.0做了一個最大的改變就是離線緩存，你可以不插手機，如果記住設備之后，你可以不插手機，隨時可以看到手機上任何數據，比如你要找個聯系人，你根本不用帶手機，如果是你們家電腦，你做了離線存儲，你直接打開電腦就可以看到數據，這些1.0完全沒有的，我們在這上面也花了很多很多的時間。前端整個架構來說，相當于是三個人。