JS 引擎大 PK：JSC vs V8 vs Hermes

问题

我们开发的一款名为 @WalmartLabs 的安卓应用遇到了内存问题，起因是安卓自带的 JSC 的垃圾回收基本没用。我们试了很多办法来减少这个应用的内存占用，但是都没成功。

当 React Native 的简单列表（FlatList）中有很多项目（我们的情况下有超过 1 千的数量）时问题就更加严重了。在不同页面间跳转时内存用量持续上升，就算清空数据后也不会下降。

救星

几周前 @kudochien 发了一条推文推荐 react-native-v8 这个包，用了这个包我们就能在安卓的 react-native 项目中打包 V8 取代 JSC 了。

那时 jsc-android 也发布了 新版本（v 245459.0.00） ，Facebook 则在 @ChainReactConf 上发布了 Hermes。

于是我们决定对比一下自带 JSC（v 241213.1.0） 、 新版 JSC（v 245459.0.0） 、 Hermes 和 react-native-v8 的内存占用，还创建了一个演示 repo 来模拟实际用例。

GitHub 地址： https://github.com/bhaskarGyan/react-native-memory-profile

我们设定的用例条件如下：

1. 带有简单列表，有大约 1 千个项目。

2. 用大型数组列表模拟在 react 状态中存储 / 移除大量记录的操作（其中一个记录是 new Array（999999）.join(’–’)）。

3. 用 react-navigation 测试内存占用。

使用的 ABI 是 x86_64

对比测试

JSC 新出的 245459.0.0 版比之前的 241213.1.0 版处理内存的效率更高，Hermes 成绩排第二，但 react-native-v8 的成绩比它们都强一大截；后者在应用启动时内存占用、简单列表内存管理、大量数据的内存占用和最重要的垃圾回收效率方面都表现出色。

示例应用

测试内容

• 从首页进入 FlatList（简单列表）。

• 向下滚动到最后一个项目（一共 870 个项目），然后返回首页。

• 进入 Memory Hungry Array，添加记录（100 个），然后移除这些记录并返回首页。

• 从 FlatList 转到 Memory Hungry Array，添加 100 个记录并返回首页。

自带 JSC（v 241213.1.0）测试结果

它是三个方案里表现最差的。它的内存占用非常多，垃圾回收效率也是最低的。

应用启动时内存占用：总计占用 59MB，JS 占用 20MB。

加载 FlatList（870 个项目）后内存占用：总计占用 239MB，JS 占用 128MB。

添加记录后内存占用（添加 16 个记录后应用就崩溃了）：总计占用 1153MB，JS 占用 1098MB。

垃圾回收：基本没做。

内存占用图：

新版 JSC（v 245459.0.0）测试结果

新版比旧版的内存占用更小，垃圾回收也正常了。

应用启动时内存占用：总计占用 53MB，JS 占用 15MB。

加载 FlatList（870 个项目）后内存占用：总计占用 191MB），JS 占用 107MB。

添加记录后内存占用：总计占用 714MB，JS 占用 596MB。

垃圾回收：正常工作，内存占用总计降到了 235MB，JS 占用 121MB。

内存占用图：

React-Native-V8 测试结果

应用启动时内存占用：总计占用 40MB，JS 占用 9MB（减少 55%）。

加载 FlatList（870 个项目）后内存占用：总计占用 105MB，JS 占用 36MB（减少 70%）。

添加记录后内存占用：总计占用 82MB，JS 占用 25MB（期间进行了垃圾回收）。

垃圾回收：正常工作，最大内存总计占用为 103MB，JS 占用 36MB，垃圾回收之后内存占用降到大约 78MB，JS 内存占用 14MB。

内存占用图：

Hermes 测试结果

Hermes 是在 7 月 11 日的 @ChainReactConf 上发布的。这是一个开源 JS 引擎，为安卓上的 React Native 应用优化。

应用启动时内存占用：总计占用 33MB，JS 占用 7MB（下降 65%）。

加载 FlatList（870 个项目）后内存占用：总计占用 397MB，JS 占用 110MB。

垃圾回收后内存占用：总计占用 358MB，JS 占用 48MB。

添加记录后内存占用（添加 50 个记录后应用就崩溃了）：总计占用 556MB，JS 占用 149MB。

垃圾回收：正常工作，内存占用峰值总计达到 556MB，JS 占用 149MB，垃圾回收后内存占用降到大约 143MB，JS 占用 48MB。

内存占用图：

总结

根据内存占用图的对比结果，react-native-v8 胜出，Hermes 紧随其后。

但在 react-native 中选择 JS 引擎时并没有银弹，具体都取决于实际用例。你应该测试自己的应用使用不同的 JS 引擎时的内存性能，然后选择最适合自己的选项。

还好 react-native 现在让用户可以根据实际用例的情况来选择 JS 引擎。

英文原文： https://dev.to/anotherjsguy/react-native-memory-profiling-jsc-vs-v8-vs-hermes-1c76