前不久，@豌豆實(shí)驗(yàn)室發(fā)布了豌豆莢2.0版本，發(fā)布會(huì)后，InfoQ采訪到了軟件工程師范懷宇（@duguguiyu）和高級(jí)軟件工程師高雄（@Rock_gao），針對(duì)豌豆莢的技術(shù)特性和Webkit技術(shù)進(jìn)行了采訪。本文將為您揭開(kāi)豌豆莢2.0神秘的面紗，帶您走近“快速、簡(jiǎn)單、有愛(ài)”的設(shè)計(jì)理念背后的技術(shù)故事：
InfoQ：豌豆莢2.0中使用到了HTML5技術(shù)，主要的應(yīng)用場(chǎng)景有哪些，與Chrome有什么區(qū)別？
高雄：我們和Chrome最大的區(qū)別在于Chrome基于Chromium，它也是Webkit核心，它的Webkit核心上面對(duì)于HTML5的支持做得非常全面。但我們只是簡(jiǎn)單基于Webkit來(lái)做的，這使得我們?cè)贖TML5支持上面會(huì)有一些難度，對(duì)HTML5支持也沒(méi)有Chrome那么全面。當(dāng)我們的前端工程師需要HTML5支持時(shí)，我們會(huì)在Windows平臺(tái)上把HTML5支持添加上。比如說(shuō)我們會(huì)實(shí)現(xiàn)HTML5的LocalStorage以及Notification這些特性。
范懷宇：在豌豆莢2.0中，收到短信時(shí)會(huì)出現(xiàn)一個(gè)彈出框，這就是利用HTML5的Notification機(jī)制實(shí)現(xiàn)的，與傳統(tǒng)Windows彈框不同，類似于Gmail中的彈出框。在詢問(wèn)是否使用某種功能時(shí)，我們會(huì)將用戶的選擇通過(guò)LocalStorage來(lái)存儲(chǔ)，與傳統(tǒng)的方式相比，這種方法會(huì)高效很多。
InfoQ：豌豆莢是國(guó)內(nèi)首家大規(guī)模使用Webkit技術(shù)開(kāi)發(fā)的非瀏覽器軟件，你們?cè)趺聪氲接眠@樣的一個(gè)技術(shù)，在選型時(shí)又做了哪些嘗試呢？
范懷宇：其實(shí)都會(huì)有所考量，我們也會(huì)去了解Chrome這樣的產(chǎn)品，它也是客戶端應(yīng)用，而且加載頁(yè)面和繪制的速度都非常快，所以我們就認(rèn)為這個(gè)技術(shù)用在其他軟件開(kāi)發(fā)上也應(yīng)該是可行的。
高雄：這正是豌豆莢區(qū)別于其他PC軟件的一個(gè)最重要的地方，我們雖然不是瀏覽器，而是一個(gè)PC上面的軟件，但是我們也會(huì)用到Webkit。這更體現(xiàn)出我們一個(gè)超前的意識(shí)，我們現(xiàn)在看Chrome或者是其他一些瀏覽器，對(duì)新技術(shù)的支持都越來(lái)越重視，比如像對(duì)HTML5的支持，對(duì)于其它PC上應(yīng)用來(lái)說(shuō)，可能以后就與HTML5分道揚(yáng)鑣了。
InfoQ：主要用到了Webkit的哪些特性？能不能列舉三點(diǎn)。
高雄：在國(guó)內(nèi)來(lái)講，我們對(duì)Webkit的應(yīng)用還算比較深入。比如Webkit在Windows平臺(tái)上的Porting并不是特別完善，我們就將它的圖形庫(kù)換成了SKIA圖形庫(kù)，從而使得豌豆莢2.0在渲染的速度和渲染的效果上都會(huì)好很多 。 第二點(diǎn)，我們把Webkit原生的網(wǎng)絡(luò)庫(kù)換成了IE的網(wǎng)絡(luò)庫(kù)，這樣使得在豌豆莢2.0中我們可以復(fù)用IE緩存，同時(shí)這為豌豆莢2.0帶來(lái)了更快的加載速度。 第三點(diǎn)，我們?yōu)閃ebkit做了很多JS擴(kuò)展，并開(kāi)發(fā)了一個(gè)名為OneRing的架構(gòu)。
InfoQ：在開(kāi)發(fā)豌豆莢的產(chǎn)品研發(fā)中，遇到了哪些問(wèn)題，這些問(wèn)題是怎么解決的？
高雄：雖然Webkit對(duì)HTML5支持已非常完善，但也僅僅是在Safari或Chrome的平臺(tái)上。對(duì)于開(kāi)發(fā)PC端軟件來(lái)說(shuō)，Chrome和Safari都比較重。所以只有Webkit比較適合，但是Webkit在Windows上面的porting有相當(dāng)大的難度，而且對(duì)HTML5支持也很有限，有很多HTML5功能都需要自己去實(shí)現(xiàn)，這是一個(gè)非常大的難度。
另外，對(duì)JS進(jìn)行深入擴(kuò)展也是一個(gè)難點(diǎn)，在擴(kuò)展時(shí)，要遵循HTML5的標(biāo)準(zhǔn)去做，還要考慮如何來(lái)管理擴(kuò)展出的JS對(duì)象，否則就會(huì)出現(xiàn)內(nèi)存泄露，或是垃圾回收等一系列問(wèn)題，這一點(diǎn)我們?nèi)匀辉诓粩嗟靥剿髦小?/p>
InfoQ：GECKO與Webkit比起來(lái)，有什么區(qū)別，為什么會(huì)選擇Webkit，而不用那個(gè)，那個(gè)技術(shù)是不是有一些局限性？在用Webkit過(guò)程中，有沒(méi)有哪些可以注意的技術(shù)細(xì)節(jié)？
高雄：首先回答第一個(gè)問(wèn)題，為什么不用GECKO。GECKO的代碼，如果對(duì)它的內(nèi)核不是了解得非常深入的話，看起來(lái)是非常困難的，加之它的可讀性也較差。此外，對(duì)CSS3、HTML4、HTML5標(biāo)準(zhǔn)的支持上，GECKO跟Webkit相比仍有一定差距。而且對(duì)舊標(biāo)準(zhǔn)支持上，比如CSS和HTML4，GECKO的得分都不是一百分，但Webkit是一百分，所以從標(biāo)準(zhǔn)支持上來(lái)說(shuō)，顯然Webkit要比GECKO好得多。
其次，從整個(gè)內(nèi)核的加載速度和解析的性能上來(lái)說(shuō)，Webkit也是強(qiáng)于GECKO的。
第二個(gè)問(wèn)題，Webkit是一個(gè)開(kāi)源項(xiàng)目，國(guó)內(nèi)用Webkit比較多的仍是一些瀏覽器公司，他們用Webkit主要作為一個(gè)仿IE內(nèi)核一樣去用，就是做一些渲染或是網(wǎng)頁(yè)加載這樣的事情。但我覺(jué)得真正用Webkit，更重要的還是要分析它里面的一些基礎(chǔ)架構(gòu)和機(jī)制，這樣的話，當(dāng)我們?cè)谧鯬C軟件或是其他平臺(tái)軟件時(shí)，都會(huì)比較得心應(yīng)手，這是我對(duì)想從事Webkit開(kāi)發(fā)工作朋友的一點(diǎn)建議。 另外，Webkit項(xiàng)目每天大概有一百到二百個(gè)commit，如果對(duì)Webkit非常感興趣的話，我建議都花時(shí)間閱讀一下。并且最好保持Webkit每天的update，這也是非常重要的。
InfoQ：我覺(jué)得豌豆莢2.0一個(gè)很明顯的特點(diǎn)，就是速度非常快，包括很多用Webkit做內(nèi)核的瀏覽器也是在追求速度，所以我想問(wèn)一下，使用Webkit技術(shù)在提升速度方面，是有那些技巧可以簡(jiǎn)單介紹一下。
高雄：我們的速度相比較Chrome來(lái)說(shuō)可能會(huì)稍慢一點(diǎn)，我最近了解到Chrome有一個(gè)新的技術(shù)，叫SPDY，這項(xiàng)技術(shù)通過(guò)在網(wǎng)絡(luò)層使用新的機(jī)制來(lái)提升網(wǎng)絡(luò)傳輸速度，這點(diǎn)對(duì)于Chrome速度的影響非常大，提升的效率也很高。對(duì)于我們來(lái)說(shuō)，我們目前還沒(méi)有引進(jìn)這套技術(shù)，在速度提升方面主要表現(xiàn)在兩個(gè)方面，一個(gè)是我們?cè)谔幚砭W(wǎng)絡(luò)傳輸時(shí)，會(huì)采用一些數(shù)據(jù)壓縮的處理。另外一點(diǎn)，通過(guò)緩存來(lái)提升速度，這是我們?cè)诟倪M(jìn)網(wǎng)絡(luò)速度方面做的最重要兩點(diǎn)。 接下來(lái)我們想引進(jìn)Chrome的SPDY技術(shù)，來(lái)進(jìn)一步提升我們的速度。
InfoQ：剛才也提到了有一個(gè)開(kāi)發(fā)框架，在不遠(yuǎn)的將來(lái)會(huì)開(kāi)源，能不能給我們介紹一下這個(gè)框架，這個(gè)框架主要是包含哪幾個(gè)部分，主要解決什么問(wèn)題？
范懷宇：首先最重要的是OneRing，我們把Webkit擴(kuò)展之后，能夠真正將Web開(kāi)發(fā)放到Windows上來(lái)，Web開(kāi)發(fā)工程師，可以完全寫(xiě)純Web代碼，后面也可以運(yùn)行。這整個(gè)實(shí)現(xiàn)部分，我們都會(huì)開(kāi)源。 在Webkit方面我們也會(huì)有一些開(kāi)源的舉措，這里面可能包含著我們對(duì)Webkit的擴(kuò)展、改進(jìn)，對(duì)HTML5的支持等等，最后的形式可能會(huì)是一個(gè)打包形式。 此外，我們還會(huì)把整個(gè)協(xié)議定義好，將接口事先都定義好，同時(shí)還有一些Windows的接口調(diào)用也要處理好，然后再將其開(kāi)源。
InfoQ：咱們?cè)贠neRing的基礎(chǔ)上做了哪些改進(jìn)？
范懷宇：最重要的是異步調(diào)用，原來(lái)是純同步的原理，但是當(dāng)你真正做大型軟件時(shí)，就會(huì)立刻發(fā)現(xiàn)問(wèn)題，這樣的方式是走不通的。然后還有線程安全，這樣做的目的是要保證數(shù)據(jù)是安全的。
InfoQ：咱們?cè)?.0版的時(shí)候看過(guò)一個(gè)金山網(wǎng)絡(luò)的評(píng)測(cè)，關(guān)于幾款手機(jī)管理軟件會(huì)有一些安全方面的漏洞，豌豆莢2.0在安全上有哪些改進(jìn)？
范懷宇：2.0最初的狀態(tài)不會(huì)有這個(gè)隱患的，包括我們?cè)趧倓傇O(shè)計(jì)2.0的時(shí)候，就把安全放到了很重要的程度，PC連接手機(jī)之前，會(huì)通過(guò)通信協(xié)議來(lái)交換密鑰，交換密鑰成功后才會(huì)保持連接。當(dāng)有一些錯(cuò)誤密鑰出現(xiàn)時(shí)，手機(jī)會(huì)拒絕訪問(wèn)，多次出現(xiàn)后，手機(jī)就不會(huì)給這個(gè)客戶端傳輸任何數(shù)據(jù)。在WIFI連接上，加強(qiáng)了密鑰輸入，在通訊的安全性上也做了很多事情。
InfoQ：從軟件方面，因?yàn)橛脩魪膽?yīng)用商店下載軟件，軟件會(huì)有一些漏洞之類的，當(dāng)然軟件商店會(huì)有檢測(cè)，如果它沒(méi)有檢測(cè)好，用戶從咱們這兒下載了，可能也會(huì)對(duì)接到咱們這邊，對(duì)這方面的安全咱們會(huì)不會(huì)有過(guò)濾？
范懷宇：這方面的事情我們?cè)?.0就做了，我們目前的一個(gè)解決方案是借助一些第三方專業(yè)的力量，比如說(shuō)在1.0，如果你下一個(gè)應(yīng)用，它會(huì)經(jīng)過(guò)360掃描，QQ掃描，還有金山這樣的公司，我們會(huì)調(diào)用他們的掃描借口，把這些應(yīng)用全部掃描一遍，然后告訴用戶這個(gè)東西在哪個(gè)掃描軟件下是不安全的，然后由用戶來(lái)決定是否繼續(xù)安裝。在2.0上我們會(huì)做更多這樣的事情，但我們畢竟不是安全廠商，做這方面沒(méi)有那么專業(yè)，所以目前的策略可能是通過(guò)合作的方式來(lái)解決這個(gè)問(wèn)題。
InfoQ：咱們豌豆莢團(tuán)隊(duì)在開(kāi)發(fā)過(guò)程中遇到哪些問(wèn)題，因?yàn)楫吘雇愣骨v2.0經(jīng)歷了十個(gè)月，可否為我們的技術(shù)愛(ài)好者分享一些你們?cè)陂_(kāi)發(fā)過(guò)程中遇到的一些比較有趣的問(wèn)題。
范懷宇：早期我們碰到一個(gè)問(wèn)題是數(shù)據(jù)的序列化和反序列化，這樣的過(guò)程會(huì)比較耗時(shí)，我們嘗試了很多種方案，從而將速度提升了很多倍，現(xiàn)在整個(gè)傳輸沒(méi)有任何問(wèn)題了，我們也會(huì)用一些更高壓縮比的方法來(lái)解決傳輸問(wèn)題。
在整個(gè)UI框架開(kāi)發(fā)過(guò)程中，很多時(shí)候會(huì)面臨前端需要什么技術(shù)支持、Webkit需要定制的問(wèn)題，加上Webkit還是個(gè)非常龐大的項(xiàng)目，隨時(shí)會(huì)有一些陷井在里面，加之我們也是在Webkit上不斷地嘗試，所以這一塊也耗費(fèi)了我們很大的精力。
但是，整個(gè)框架真的是節(jié)省了我們很多時(shí)間，前端如此多的界面，還有很多復(fù)雜的效果，只有兩位前端工程師在做，高雄一個(gè)人在負(fù)責(zé)使用Webkit碰到的各種各樣的問(wèn)題，真的說(shuō)豌豆莢十個(gè)月，我們耗了很多精力是在后端，很多業(yè)務(wù)邏輯要處理得很細(xì)致，然后各種各樣的狀況。其實(shí)后端邏輯會(huì)是我們開(kāi)發(fā)量最大的一部分，包括從手機(jī)上讀取各種數(shù)據(jù)，我們2.0做了一個(gè)最大的改變就是離線緩存，你可以不插手機(jī)，如果記住設(shè)備之后，你可以不插手機(jī)，隨時(shí)可以看到手機(jī)上任何數(shù)據(jù)，比如你要找個(gè)聯(lián)系人，你根本不用帶手機(jī)，如果是你們家電腦，你做了離線存儲(chǔ)，你直接打開(kāi)電腦就可以看到數(shù)據(jù)，這些1.0完全沒(méi)有的，我們?cè)谶@上面也花了很多很多的時(shí)間。前端整個(gè)架構(gòu)來(lái)說(shuō)，相當(dāng)于是三個(gè)人。