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 引擎的上述两个短板:

  • 充分发挥硬件,主要是 CPU 和 GPU 的能力。比如充分利用 Intel CPU 的特殊指令集,GPU 的特殊 extension。
  •  因为我们熟悉 web 引擎的各个阶段,通过对典型应用场景的性能评估,了解瓶颈所在,从而优化引擎逻辑。
余下全文(1/3)

本文最初发表在infoq,文章内容属作者个人观点,不代表本站立场。

分享这篇文章:

请关注我们:

发表评论

电子邮件地址不会被公开。 必填项已用*标注