专访英特尔（中国）开源技术中心：HTML5要如何达到原生性能

HTML5 应用被视为让本地软件云端化的利器，HTML5 游戏也被视为一片新的蓝海，然而，HTML5 远逊于原生的性能让众多开发者望而却步。本次 InfoQ 中文站便就此问题采访了英特尔（中国）开源技术中心负责 crosswalk runtime 和 H5 优化、硬件加速的两位工程师。

　　InfoQ：请先做个简单的自我介绍

余枝强：我是英特尔中国开源技术中心的软件技术经理余枝强，主要负责 HTML5 引擎 -Crosswalk 在安卓平台的开发，以及一些新兴 Web 技术的研发

顾扬：我是英特尔中国开源技术中心 web 研发经理顾扬，负责 web 图形相关功能(CSS, Canvas2D 和 WebGL 等)的实现和优化

　　InfoQ：大家都很期待 H5 达到原生性能，那么从硬件层面和浏览器层面来说，H5 能否达到原生性能呢？

余枝强：其实现在轻度、中度游戏/应用如果能够通过一些全栈式的优化(包括应用层，软件库，Web 引擎层)，某些场景下可能还需要一些 HyPid 实现，这样，HTML5 应用接近或达到类似原生应用的性能应该问题不大。但重度、计算量大的应用（比如复杂的 3D 游戏，包括物理引擎等）目前确实还是有不少差距的。

我这里可以分享几个例子，它们都是一开始性能有较大的差距，但通过相应的优化性能达到了质的提升。

其中一个例子是和腾讯 Alloy 团队合作的，针对 HTML5 图像处理库的优化。原先这个图像处理库在移动端性能不理想，比如说对一副图像实现一个木雕效果需要十几秒甚至几十秒的时间（其中涉及到较为复杂的计算），后来我们在应用里引入并行（WebCL, 它可以利用 CPU 以及 GPU 中的多核的能力），通过对图像处理库相应的部分用 WebCL 重新实现，另外在 Crosswalk 引擎里加入 WebCL 的支持以及相应优化，最后这个图像处理时间在安卓平台上从几十秒降低到 2 秒以内。

另外一个例子是和触控科技合作了，针对一个游戏-“进击的小怪物”的 HTML5 版本做优化，其中涉及到比较酷炫的消除/爆炸效果，而这些效果在最新的 Chrome 里跑只有十几的 fps 。通过引入 Crosswalk 的游戏模式，把上层相对耗时的 API 通过原生的实现再桥接到 HTML5 引擎中，使得酷炫效果的性能比 Chrome 好 5 倍左右。

另外最近我们在调研一种典型的用户场景：大规模的图片的加载和滑动的性能问题，以及和原生应用的性能区别。经过初步的调研，我们发现性能的差距有几个方面的原因：没有做更好的缓存，没有利用系统服务，不必要的事件处理，不必要数据转换，以及大量的数据缺少高效的数据传输机制，这中间有很多开销，会影响到用户体验。我们打算做一个参考实现来解决这种类型应用的性能问题。

总结来说， HTML5 的性能问题，可能是多重原因组成，比如应用本身设计不合理，加了不必要的事件，没有用更好的缓存等等，另一方面引擎也可能有问题，比如数据传递，比如没有利用上更好的硬件特性。再加上 Javascript 语言的动态性，相对不容易写出优化的代码。这些问题，如果能够有全局的角度出发做相应优化，性能会有机会提升非常明显。

另外对应用开发者来说，尽量用一些成熟的框架，最好也要对对底层引擎有一定的了解从而避开 javacript 里的坑。成熟的框架相对来说已做了一些 Javascript 层面的优化，再通过引擎本身针对应用的场景做相应优化，同时让 Web 引擎更好的利用到底层的硬件能力，这些层面做好了，就容易有好的体验。

顾扬：从我的理解来说，native 应用直接跟硬件打交道，web 应用则是通过 web 引擎跟硬件打交道，多了 web 引擎这个中间层。正因为这个中间层，带来了一些性能差异：

1， web 引擎相对 native 发展来说还很年轻，对 CPU，GPU 这样的计算资源还不能充分应用。

2，web 引擎是一种通用平台，日益增强的能力也带来了日益复杂的架构和更多的 overhead。当然除却 web 引擎带来的性能损失，JS 语言本身也有一些局限性，比如数据类型不明确，不支持多进程等。我们的优化主要针对 web 引擎的上述两个短板：