干货 | 加载速度提升15%，携程对RN新一代JS引擎Hermes的调研

作者简介

储贻锋，携程无线平台研发部基础框架组资深Android研发，目前主要负责CRN Android端和携程Android基础架构的维护与开发工作。

引言

Facebook在ChainReact2019大会上正式推出了新一代JavaScript执行引擎Hermes。Hermes是个轻量级的JS引擎，专门对Android上运行ReactNative进行了优化。我们第一时间在 CRN 项目中集成了Hermes, 并做了深度调研。

一、Hermes介绍

自ReactNative推出以来，有大量的APP接入并使用，其中也包括大型应用的主流程业务。随着业务复杂度不断上升，性能问题变得无法忽视。

在分析性能数据时，Facebook团队发现 JavaScript 引擎是影响启动性能和应用包体积的重要因素。由于JavaScriptCore最初是为桌面浏览器端设计，相较于桌面端，移动端能力有太多的限制，为了能从底层对移动端进行性能优化，Facebook团队选择自建JavaScrip引擎，设计了Hermes，限于iOS AppStore审核限制，目前仅用于Android平台。

Chain React大会上官方给出了Hermes引擎一组数据：

• 从页面启动到用户可操作的时间长短（Time To Interact：TTI），从4.3s减少到2.01s

• App的下载大小，从41MB减少到22MB

• 内存占用，从185MB减少到136MB

CRN先前做过框架代码拆分和预加载、业务代码懒加载、业务代码预加载等性能优化方案，正困惑于如何更近一步进行性能优化。当看到Hermes这三个关键指标都有了显著的提高，非常激动，觉得Hermes是非常好的一个方向，接下来我们就来了解Hermes的使用和实测性能数据。

二、快速上手Hermes

Faceback团队已经将Hermes工具上传到了npm : hermesvm。hemres工具可以直接运行JS代码、转换字节码并且提供非常多的参数进行调优控制。

这里介绍一下hermesvm执行JS代码和转换bytecode功能。

// 创建hermes_test文件，内容：print("This is Hermes Demo");	
vim hermes_test.js	

	
// 直接执行纯文本js	
~/node_modules/hermesvm/osx-bin/hermes hermes_test.js	
This is Hermes Demo	

	
// 转换成bytecode	
~/node_modules/hermesvm/osx-bin/hermes --emit-binary hermes_test.js -out hermes_test.hbc	

	
// 执行字节码	
~/node_modules/hermesvm/osx-bin/hermes hermes_test.hbc	
This is Hermes Demo

三、Hermes是如何优化的？

主流JavaScript引擎，例如JSC、V8、SpiderMonkey等几乎都是为了桌面端浏览器服务的，Hermes针对移动终端设备的特点做了一些优化，其中最重要的我们认为是以下两点：

3.1 字节码预编译

现代主流的JavaScript引擎在执行一段js代码的大概流程是：

• 先读取源码文件

• 解析源代码并转换成字节码（bytecode）

• 最后执行

在运行时解析源码转换字节码是一种时间浪费，所以Hermes选择预编译的方式在编译期间生成字节码。这样做一方面