本文由 简悦 SimpRead转码，原文地址 www.callstack.com
了解如何使用 Hermes 实现更好的性能并优化 Android 应用程序的启动时间。
以下文章是React Native 优化终极指南的一部分，介绍了如何使用 Hermes 优化 Android 应用程序的启动时间。
为什么这很重要？
众所周知，优化性能和尽可能快的运行速度是移动应用程序取得成功的最重要因素。它们极大地影响了用户对应用程序的看法，并可能极大地影响其投资回报率。此外，性能良好的应用程序可获得更高的 Google Play Store 指标，从而提高在店内搜索中的排名。在本文中，我们将向您展示如何在 Hermes 的帮助下实现所有这些优势。
在基于《React Native 优化终极指南》的其他博文中，我们将讨论以下与性能相关的主题：
- 利用 Gradle 设置优化 Android 应用程序的大小
- 使用 "Autolinking "自动管理依赖关系
- 使用 Flipper 更快更好地进行调试
- 为什么必须始终运行最新版本的 React Native？
- 实验 React Native 的新架构
请务必查看这些内容。现在让我们进入正题。
启动时间如何影响应用程序的成功？
用户希望应用程序响应迅速，加载速度快。但是，如果您在启动时间内加载大量 Android 软件包（这是不必要的），并且使用的引擎没有针对 Android 进行优化，那么您就不可能满足这些期望。在这种情况下，您的应用程序最终可能会在 App Store 或 Play Store 中获得差评。在最极端的情况下，它甚至会被竞争对手抛弃。
用单一指标来描述启动时间并不容易，因为加载阶段的许多不同阶段都会影响应用程序的 "快 "或 "慢"。 例如，在灯塔报告中，有多达六个性能指标用于描述网络应用程序。其中之一是交互时间（TTI），用于衡量应用程序准备好进行首次交互的时间。
逐步加载过程
从第一次按下抽屉中的应用程序图标开始，会发生很多事情。
加载过程从本地初始化开始 (1)，加载 JavaScript 虚拟机并初始化所有本地模块。然后继续从磁盘读取 JavaScript (2)，将其加载到内存中，解析并开始执行。在下一步（3）中，React Native 开始加载 React 组件，并将最终指令集发送给 UIManager。最后，UIManager 会处理从 JavaScript 接收到的信息，并开始执行本地指令（4），最终形成本地界面。
如上图所示，有两组操作会影响应用程序的整体启动时间。
第一组涉及图中的操作 1 和 2，描述了 React Native 引导（启动虚拟机和虚拟机执行 JavaScript 代码）所需的时间。另一组包括剩余的操作 3 和 4，与您为应用程序创建的业务逻辑相关。这组操作的长度在很大程度上取决于组件的数量和应用程序的整体复杂性。
本文的重点是第一组--与配置相关的改进，而非业务逻辑本身。如果您还没有测量过应用程序的整体启动时间，或者还没有使用过 Hermes 等工具，请继续阅读。
在安卓系统上，长的启动时间和缓慢的用户体验可能是你的应用程序获得差评并最终被放弃的原因之一。
特别是考虑到移动市场已经趋于饱和，创建好玩的应用程序就显得尤为重要。现在，所有移动应用程序不仅要简单易懂、直观易用，而且还要让人愉快地与之交互。
一个常见的误解是，React Native 应用程序与原生应用程序相比，在性能上会有所折损。事实上，只需足够的关注和配置调整，它们的加载速度一样快，而且没有任何显著差异。
如何使用 Hermes 提高应用程序的性能
虽然 React Native 应用程序采用了原生界面，但它仍然需要在运行时运行 JavaScript 逻辑。为此，它分离出自己的 JavaScript 虚拟机。默认情况下，它使用 JavaScriptCore。该引擎是 WebKit 的一部分，默认情况下仅适用于 iOS。现在，出于兼容性目的，它也是 Android 上的首选。这是因为使用 V8 引擎（Chrome 浏览器附带的引擎）可能会增加 Android 和 iOS 之间的差异，使平台间的代码共享变得更加困难。
JavaScript 引擎的日子并不好过。它们不断推出新的启发式方法来提高整体性能，包括加载代码和执行代码所需的时间。为此，他们会对常见的 JavaScript 操作进行基准测试，并对完成这一过程所需的 CPU 和内存提出挑战。
注： V8 团队最近发布了一篇关于提高正则表达式性能的博文。请务必查看。
处理 JavaScript 引擎的开发人员的大部分工作都是针对 Facebook 或 Twitter 等主要和最受欢迎的网站进行测试。React Native 以不同的方式使用 JavaScript 并不令人惊讶。例如，为网页制作的 JavaScript 引擎无需过多担心启动时间。在加载页面时，浏览器很可能已经在运行。正因为如此，引擎可以将注意力转移到整体 CPU 和内存消耗上，因为网络应用程序可以执行大量复杂的操作和计算，包括 3D 图形。
如上性能图所示，JavaScript 虚拟机消耗了应用程序总加载时间的很大一部分。不幸的是，除非构建自己的引擎，否则你对此无能为力。这就是 Facebook 团队最终要做的事情。
Hermes是一个JavaScript引擎，专为考虑到React Native而设计。它针对移动设备进行了优化，专注于对CPU不敏感的指标，如应用程序大小和内存消耗。您可能已经在使用它了！从 v0.70 开始，React Native 默认开启了 Hermes，这标志着该引擎稳定性的一个重要里程碑。
从 2019 年开源的仅支持安卓系统的裸机引擎，到精心策划的受支持的 JS 功能集（由于尺寸限制），再到寻找低尺寸足迹的方法来添加更多 EcmaScript 规范功能（如代理和 Intl），直至使其适用于 macOS 和 iOS，React Native 走过了漫长的道路。如今，Hermes 的体积依然很小（约 2 MB），却能显著改善应用程序的 TTI，并为我们提供了一套丰富的功能，足以在大多数应用程序中使用。
在详细介绍如何在现有的 React Native 应用程序中启用 Hermes 之前，我们先来看看它的一些关键架构决策。
Hermes 中的字节码预编译缩短了执行业务逻辑的时间
通常情况下，传统 JavaScript VM 的工作方式是在运行时解析 JavaScript 源代码，然后生成字节码。因此，代码的执行会延迟到解析完成之后。而 Hermes 则不同。为了减少引擎执行业务逻辑所需的时间，它会在构建时生成字节码。
它可以使用各种技术花更多时间优化捆绑包，使其更小更高效。例如，生成的字节码在设计上可以在内存中映射，而无需急于加载整个文件。由于移动设备上的 I/O 操作往往会增加整体延迟，因此优化这一过程可显著改善 TTI。
Hermes 中的无 JIT 转化为更高的 TTI
现代浏览器引擎大多使用即时（JIT）编译器。这意味着代码是逐行翻译和执行的。不过，JIT 编译器会跟踪 warm 代码段（出现次数少的代码段）和 hot 代码段（运行次数多的代码段）。然后，这些频繁出现的代码段会被发送给编译器，编译器会根据这些代码段在程序中出现的次数，将它们编译成机器代码，并进行一些优化。
**与其他引擎不同，Hermes 是一个 AOT（超前）引擎。因此，JIT 编译器会对 热代码片段 执行的某些优化并不存在。
一方面，会使 Hermes 捆绑程序在面向 CPU 的基准测试中表现不佳。不过，这些基准测试与现实生活中的移动应用体验并不具有可比性，因为在现实生活中，TTI 和应用规模是优先考虑的因素。另一方面，JIT 引擎会降低 TTI，因为它们需要时间来解析捆绑包并及时执行。也就是说，它们必须运行几次代码，以检测常见模式并开始优化。
如何在 Android 和 iOS 上开始使用 Hermes
如果你想开始使用 Hermes，请确保将 android/app/build.gradle 中的 enableHermes 标志设置为 true：
project.ext.react = [
entryFile: "index.js",
enableHermes: true
]
对于 iOS，将 ios/Podfile 中的 hermes_enabled 标记设置为 true：
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)
在这两种情况下，无论何时切换 Hermes 标志，都要确保按照本地文件中提供的说明重建项目。项目重建后，您可以享受更快的应用程序启动时间，应用程序的大小也可能更小。
注： 你可以在我们的博客上找到更多关于编译Hermes和与React Native集成的见解。如果你更喜欢观看或收听，我们的播客The React Native Show也有一整集专门讨论Hermes，请务必查看。
使用 Hermes 缩短启动时间，提高性能和用户体验
让应用程序快速加载并非易事。这是一项持续的工作，其最终结果将取决于许多因素。你可以通过调整应用程序的配置和编译源代码的工具来控制其中的一些因素。
开启 Hermes 是你现在可以做的大幅提高应用程序性能的方法之一。为此，请熟悉他们撰写的关于 React Native 性能的文章。这往往是一场由微小而简单的改进组成的游戏，一旦应用，就会产生巨大的不同。React Native 核心团队已经创建了一份可视化报告，对原生 RN 和启用了 Hermes 的 RN 进行了基准测试，你可以在这里查看。
正如我们在关于运行最新的 React Native 的文章中提到的，只要你的 React Native 版本保持最新，Hermes 就是你可以利用的资产之一。这样做可以帮助你的应用程序保持最佳性能，让它以最快的速度运行。
需要性能方面的帮助？请联系我们！
如果您正在为提高应用程序性能而苦恼，请立即 联系我们。我们是 Meta 和 Vercel 的官方合作伙伴，我们一直在为客户提供高质量的解决方案，并为 React Native 生态系统做出了巨大贡献。如果您正在寻找性能优化合作伙伴，我们的React Native 应用程序开发公司 肯定是您的不二之选。
