文章： 了解豌豆荚2.0背后的技术故事

前不久， @豌豆实验室发布了豌豆荚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完全没有的，我们在这上面也花了很多很多的时间。前端整个架构来说，相当于是三个人。