Hermes：是什么、功能及 React Native 优化

什么是 Hermes？

Hermes — 是一个紧凑的 JavaScript 引擎，由 Meta 团队专门为 React Native 创建。它于 2019 年作为 React Native 中默认使用的 JavaScriptCore (JSC) 的替代品而发布。Hermes 的主要目标是在移动设备上（尤其是资源有限的 Android 设备）确保应用程序尽可能快地启动。

Hermes 的关键特性是预先编译 (AOT — Ahead-of-Time)。与在运行时编译代码的传统 JS 引擎 (JIT — Just-in-Time) 不同，Hermes 在应用程序构建阶段就已经将 JavaScript 编译为字节码。这意味着设备上不进行编译 — 字节码由 Hermes 虚拟机立即执行。

Hermes 不是通用的 JS 引擎 — 它专门针对 React Native 场景进行了优化。它没有移动开发中不需要的功能：eval、生成器、一些 ES6 特性。这使得引擎更加紧凑和快速。根据 Meta 的数据，Hermes 压缩后的大小约为 200–300 KB，远小于 JSC（约 2–3 MB）。

Hermes 架构和字节码

Hermes 的架构与传统 JS 引擎不同，它没有 JIT 编译器。取而代之的是，Hermes 使用高效的虚拟机 (VM) 来执行预先编译的字节码。放弃 JIT 有三个关键优势：可预测的性能、更低的内存消耗和缩短的启动时间。

Hermes 字节码是 JavaScript 代码的紧凑表示形式，针对快速执行进行了优化。在构建阶段（通过 Metro），JavaScript 文件被编译为 .hbc (Hermes Bytecode) 文件。应用程序加载这些文件，Hermes VM 无需额外编译即可执行它们。构建过程通过 hermes-transformer 插件集成到 Metro 中。

代码处理阶段

Hermes 中的 JavaScript 处理过程包括三个阶段：Parse — 源代码的语法分析，Compile — 翻译为字节码，Execute — 虚拟机执行字节码。前两个阶段在构建阶段执行，第三个阶段在设备上执行。这与 JSC 根本不同，JSC 的所有三个阶段都在设备上执行。

# 在构建期间编译 Hermes 字节码
hermes -emit-binary -out index.hbc index.js

# 检查生成的字节码大小
ls -lh index.hbc

# 显示字节码统计信息
hermes -dump-bytecode index.hbc

# 为生产优化字节码
hermes -O index.js -emit-binary -O target.hbc

编译后，所有 .hbc 文件与原生代码一起打包到 APK 或 IPA 中。应用程序启动时，Hermes VM 加载字节码并几乎立即开始执行 — 不需要 V8 和 JSC 典型的 JIT 预热时间。

Hermes vs JSC：对比

比较 Hermes 和 JavaScriptCore (JSC) 有助于理解何时选择哪个引擎。JSC — 来自 Apple 的全功能 JS 引擎，用于 Safari。Hermes — 针对 React Native 的专用引擎。在它们之间进行选择取决于项目的优先级。

Hermes 在启动速度和内存消耗方面胜出，但在复杂计算的执行性能上落后于 JSC。JSC 的 JIT 编译在运行时优化热点代码，这在 CPU 密集型操作中具有优势。对于典型的 React Native 应用程序，其中 UI 更新和导航是主要负载，Hermes 凭借快速启动提供了更好的用户体验。

Hermes 对 React Native 的优化

Hermes 包含多项针对 React Native 的优化。其中最主要的是与 JSI (JavaScript Interface) 的集成。Hermes 原生支持 JSI，这使得无需额外层即可使用新的 React Native 架构（Fabric + Turbo Module）。这使 Hermes 和新架构成为实现最大性能的理想组合。

内存管理

Hermes 使用针对移动设备优化的分代垃圾回收器 (generational GC)。与 JSC 不同，JSC 的垃圾回收可能导致 UI 出现明显的暂停 (jank)，而 Hermes 在帧之间以小批量执行 GC，最大限度地减少了对用户体验的影响。据 Meta 称，在典型的 React Native 场景中，Hermes 的 GC 暂停时间比 JSC 短 2–3 倍。

延迟加载和常量

Hermes 支持模块的延迟加载 — JavaScript 模块仅在真正需要时才编译。这减少了字节码的大小并加快了启动速度。此外，Hermes 在编译阶段计算常量表达式，在可能的情况下用常量值替换函数调用。

// Hermes 特定优化示例

// 1. Hermes 内联常量表达式
const TAX_RATE = 0.07;
const price = 100;
// Hermes 预计算：TAX_RATE * price 在编译期间
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes 优化属性访问链
const config = { api: { timeout: 5000 } };
// Hermes 内部缓存 config.api 访问
const timeout = config.api.timeout;
fetch(url, { timeout });

需要注意的是，Hermes 支持通过 Chrome DevTools 进行调试（从 Hermes 0.12 版本开始）。开发人员可以使用熟悉的工具：断点、内存分析、变量检查。这消除了早期版本中对 Hermes 的主要反对意见之一，当时调试功能有限。

在 React Native 项目中配置 Hermes

Hermes 的配置取决于 React Native 的版本。从 React Native 0.70 开始，新项目默认启用 Hermes。对于之前创建的项目或需要在引擎之间切换时，配置通过构建设置进行。

Android 的配置

对于 Android，Hermes 在 android/app/build.gradle 文件中通过 hermesEnabled 标志启用。对于 iOS，在 Podfile 中通过 :hermes_enabled 变量进行配置。更改配置后，需要重新安装 pod 并重新构建项目。

// android/app/build.gradle — 启用 Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — 启用 Hermes
hermes_enabled = true
pod 'hermes-engine'

要检查 Hermes 是否在应用程序中使用，请在 Android 上运行 adb logcat | grep Hermes 或在 iOS 上检查 Xcode 控制台。应用程序启动时，Hermes 会显示 “Hermes VM initialized” 或类似消息。您还可以在 JavaScript 代码中运行 globalThis.HermesInternal — 如果 Hermes 处于活动状态，此属性将可用。

// 检查 Hermes 是否正在运行
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes 引擎已激活');
  console.log(
    '版本：',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes 未激活（回退到 JSC）');
}