HTML5、Web 引擎与跨平台移动 App 开发

移动端跨平台应用开发是个有趣的话题。纵观该领域目前各个开发商提供的多种方案，大致可以分为三大类：

1. 基于 HTML5 的方案。该方案以 PhoneGap / Cordova 为代表。其基本思路是针对 HTML5 标准目前功能上的不足，补充定义了一套比较实用的 API（比如硬件访问 / 系统交互等），然后基于平台上自带的 Web 引擎（比如 iOS 的 UIWebview 等），通过扩展机制实现了这些 API，在此基础上再提供一套应用打包部署系统。 Intel 的 XDK 也属于此类方案。
2. 将 Native API 映射封装成统一语言的 API 的方案。该方案以 Titanium 、 Xamarin 为代表，其中 Titanium 提供 JavaScript API，Xamarin 提供 C# API。这样的好处是可以较容易达到和 Native API 类似的能力，编程模型 / 方式也和原生应用相似。
3. 有行业针对性的 HTML5 API 方案。比如 Ludei 的 CocoonJS 就是一个比较有意思的方案，它设计了一套专门针对 2D/3D 游戏开发的 API（支持 iOS 和 Android）。可以认为它是 HTML5 图形操作的子集（Canvas +WebGL），再加上一些扩展的 API 比如硬件访问能力 / 广告 / 应用内购买 / 社交网络整合等，以实现一个完整的游戏引擎。

本文重点介绍基于 HTML5 的方案相比其他方案的优缺点，如何实现更好的效果，以及目前的一些进展。

HTML5 方案的特点

原生 API 映射的方案，如 Titanium、Xamarin，其优点在于功能和性能与原生系统比较接近。但是，由于不同系统原生 API 设计上还是会有不少差异，API 的映射还是需要不少的权衡取舍。同时，由于这些 API 是这些厂商自定义的，谈不上什么标准，相应的开发资源（程序库 / 技术支持 / 社区等等）也相对有限。

而另一方面，标准化、开发资源的丰富则是 HTML5 方案最大的优点，同时第三方的 HTML5 框架工具比如 PhoneGap/Cordova 也极大促进了 HTML5 应用的发展，它们提供了方便的跨平台应用打包 / 发布服务、实用的 API、灵活的扩展机制、以及积累下来的丰富的第三方 API 实现。而上游的 W3C 一旦开始支持一些新的 API，PhoneGap/Cordova 也可以很快沿用这些标准的 API 将相关能力开放出去。

HTML5 方案的主要不足则在于功能和性能方面，这主要是因为 HTML5 应用的能力严重依赖于系统自带的 Web 引擎：iOS 的 UIWebview、Android 的 Webview 等，此类组件的 HTML5 能力相比 Safari for iOS、Chrome for Android 都要差一截。另外在 Android 平台上，由于系统碎片化比较严重，不同 Android 版本的 Webview 的 HTML5 能力也有较大差异，导致相应的 HTML5 应用一致性难以保证。

好消息是，现在已经出现一些第三方的 Web 引擎以提供比系统默认的 Webview 更好的功能和性能，而 PhoneGap/Cordova 也正在改进架构以便引入这些更好的第三方 Web 引擎。另外对于 Tizen、Firefox OS 这样本身就是 HTML5 Runtime 加上扩展 API 的系统而言，HTML5 应用是一等公民，在功能拓展方面相比 iOS、Android 上会增强不少。

而第三种方案，CocoonJS 的优点是专注于 2D/3D 游戏开发，画图性能很好，比如同时画 1000 个精灵也能达到 60FPS，这是绝大多数的浏览器 / 通用的 HTML5 引擎目前还做不到的。这个方案的缺点在于，由于它的画图操作简化了很多路经，它无法做到和 HTML5 DOM 元素的互操作，而且它的 HTML5 能力也只是一个子集，功能比较受限。目前 CocoonJS 针对 Android 也引入了另外一种模式 Webview+ 作为补充，Webview+ 基于 Chromium 的内核加上 Cordova API 的支持以实现更通用的 HTML5 能力。

总的来说，HTML5 应用的能力很大程度上依赖于 Web 引擎的能力。因此，无论是移动操作系统开发商还是开发工具的开发商，都持续在 Web 引擎的方向投入了更多的努力。

Web 引擎

Web 引擎目前大致可分为三种方式：

1. 浏览器，比如 Safari/Chrome/UC Browser 等 ;
2. 系统自带的 Webview 组件，比如上面提到的 iOS UIWebview 和 Android Webview
3. 专门的 Web Engine，比如 Intel 的开源项目 Crosswalk 、Ludei 的 Webview+

浏览器方式很容易理解，一个 HTML5 应用就是一个 Web 页面，用户通过浏览器打开一个 URL，然后进入浏览器的全屏模式 /App 模式进行操作，或者是通过点击一个事先创建好的快捷方式打开应用。这种方式的性能取决于浏览器本身对 HTML5 的支持情况，一般来说要优于 Webview 组件的方式，但是问题在于不同的浏览器有差异，而且通过浏览器运行 HTML5 较难做到类似原生应用的体验（应用切换 / 权限管理 / 系统资源访问 / 整合等）以及丰富的 API 支持。

Webview 组件方式的一般用法是以 Hybrid 的方式发布 HTML5 应用，即上述提到的 PhoneGap/Cordova 方案所采用的方式。其问题已经在上面提到过，主要是 Webview 组件本身对 HTML5 的支持能力不足。

专门的 Web 引擎可以有较好的 HTML5 功能和性能支持，同时有较好一致性，类似原生应用的系统整合也可以做得较好。这种方式的缺点则在于开发者需要将 Web 引擎与应用程序一起打包，生成的应用大小会更大，因此有的 Web 引擎（如 Crosswalk）也提供了一种“共享模式”，让多个应用可以共享一个 Web 引擎，仅当应用第一次启动并且发现系统还没有相应 Web 引擎时才提示用户下载安装。

目前的发展趋势是：通过 PhoneGap/Cordova 方式得到丰富的 API 支持，通过专门开发的 Web 引擎去提升 HTML5 的能力。

Crosswalk 和 Ludei 的 Webview+ 在概念上比较类似。Webview+ 是闭源的，目前还不好评估；Crosswalk 由我所在的团队开发，是开源的（BSD 许可协议），基于 Chromium 内核，着重于对 HTML5 功能和性能的支持，发布周期为六周一次，支持 Cordova API。

目前 Crosswalk 正式支持的移动操作系统包括 Android 和 Tizen，在 Android 4.0 及以上的系统中使用 Crosswalk 的 Web 应用程序体验和原生应用没有区别。该引擎现在已经成为众多知名 HTML5 平台和应用的推荐引擎，包括 Google Mobile Chrome App 、 Intel XDK 、 Famo.us 和 Construct2 等等，未来的 Cordova 4.0 也计划集成该 Web 引擎。不过比较遗憾的是，由于 iOS 的限制（iOS 不允许应用使用使用除 iOS UIWebView 之外第三方的 JIT–即时编译引擎），目前 Crosswalk 也没有办法提供直接的支持，但这也许会随着 HTML5 更广泛的进入移动市场而发生改变。

总结

现在的 HTML5 App（加上 API 扩展）已经可以胜任很多事了，比如教育类应用，休闲游戏等等。不过对于那些实时性要求比较高的、计算量大的（比如涉及大量的元素绘制，或并行计算等）、复杂的 3D 游戏，多人在线游戏 / 应用等还有不少差距。另外，工具方面，如何能够更高效的调试 / 开发 / 性能内存调优 HTML5 应用也是另外一个需要提高的地方。不过，这些方面也在不断的演进。相信不久的将来，HTML5 终会成为主流移动开发平台。

作者介绍

余枝强目前是英特尔开源技术中心的软件技术经理。 主要负责 HTML5 引擎 – Crosswalk 在安卓平台的开发，以及一些其他和 Web 有关的新兴技术的研发工作（如 HTML5 并行技术, 3D Camera 等）。他坚信 Web 是未来， 也非常希望和大家一起努力，让这个未来能够更快更好的到来。

感谢杨赛对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。