JS 引擎大 PK:JSC vs V8 vs Hermes

阅读数:3405 2019 年 7 月 24 日 18:17

JS引擎大PK:JSC vs V8 vs Hermes

问题

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

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

救星

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

JS引擎大PK:JSC vs V8 vs Hermes

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 来模拟实际用例。

JS引擎大PK:JSC vs V8 vs Hermes

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 的成绩比它们都强一大截;后者在应用启动时内存占用、简单列表内存管理、大量数据的内存占用和最重要的垃圾回收效率方面都表现出色。

示例应用

JS引擎大PK:JSC vs V8 vs Hermes

测试内容

  • 从首页进入 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。

垃圾回收:基本没做。

内存占用图:

JS引擎大PK:JSC vs V8 vs Hermes

新版 JSC(v 245459.0.0)测试结果

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

应用启动时内存占用:总计占用 53MB,JS 占用 15MB。

加载 FlatList(870 个项目)后内存占用:总计占用 191MB),JS 占用 107MB。

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

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

内存占用图:

JS引擎大PK:JSC vs V8 vs Hermes

React-Native-V8 测试结果

应用启动时内存占用:总计占用 40MB,JS 占用 9MB(减少 55%)。

加载 FlatList(870 个项目)后内存占用:总计占用 105MB,JS 占用 36MB(减少 70%)。

添加记录后内存占用:总计占用 82MB,JS 占用 25MB(期间进行了垃圾回收)。

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

内存占用图:

JS引擎大PK:JSC vs V8 vs Hermes

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。
内存占用图:

JS引擎大PK:JSC vs V8 vs Hermes

总结

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

JS引擎大PK:JSC vs V8 vs Hermes

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

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

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

评论

发布