问题

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

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

救星

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

React Native V8已开源：https://t.co/TPS0dWSGaw

如今在已有的安卓RN项目中集成V8变得非常简单。
只要把react-native-v8 node包添加进来，然后在build.gradle中加15行代码即可。

那时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千个项目。
用大型数组列表模拟在react状态中存储/移除大量记录的操作（其中一个记录是new Array（999999）.join(’–’)）。
用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

创作场景

JS 引擎大 PK：JSC vs V8 vs Hermes