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