Mackit New

Mackit — Cache cleaner for macOS developers: scans regenerable caches left by Xcode / Node / Flutter and more, risk-labeled, so you can reclaim disk space.

Learn more
Notice We stopped publishing new developer articles in June 2024. Thank you for visiting. Archived posts
前端

React Native 中Hermes是什么,对性能有什么影响

Hermes使得JS以AOT方式运行,相对于JIT性能更高。新版的React native 框架中自带一个捆绑版本的 Hermes。一个名为HermesInternal的全局变量将在 JavaScript 中可用,可用于验证是否正在使用 Hermes:

const isHermes = () => !!global.HermesInternal;

Hermes 从 React Native 0.70 版本开始默认启用。下面会介绍如何在较早版本的 React Native 上启用 Hermes 引擎。 首先请确保你运行的 React Native 版本在 0.60.4 或以上。Hermes 的核心优势在于其针对 React Native 的优化。它通过将 JavaScript 源代码在构建时编译成字节码,显著加快了应用的启动速度,因为无需在运行时执行昂贵的编译步骤。总的来说Hermes Engine 的设计初衷是为了优化 React Native 应用的性能。

Where to find JS engine status in the new project?

它通过对 JavaScript 代码的提前编译,将其转化为字节码,从而减少了运行时的解析时间。这种预编译机制使得应用启动速度显著提升,用户体验更加流畅。在 CPU 利用率方面,Hermes 也有显著的优势。 通过优化 JavaScript 执行和垃圾回收过程,Hermes 提供了更快的启动时间和更低的内存占用。研究表明,使用 Hermes 的应用在性能上有显著提升,用户体验更加流畅

使用Hermers后页面加载速度至少提升15%,有效解决旧版RN中卡顿的问题。

根据官方测试数据,Hermes在启动时间方面表现突出:

  • 启动时间:从800ms减少到350ms,提升幅度达56%
  • 内存占用:从72MB减少到45MB,降低38%
  • 应用体积:从4.8MB减少到3.2MB,缩小33%

Hermes与React Native的新架构JSI(JavaScript Interface)完美结合,通过直接通信机制实现零拷贝交互,进一步提升了性能。这种设计使得原生与JavaScript之间的交互更加高效,避免了序列化和反序列化的开销。