关注前沿技术,分享热点话题,QCon全球软件开发大会三站同启,重磅回归!立即查看 了解详情

JS引擎大PK:JSC vs V8 vs Hermes

2019 年 7 月 24 日

JS引擎大PK:JSC vs V8 vs Hermes

问题

我们开发的一款名为@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. 带有简单列表,有大约 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

2019 年 7 月 24 日 18:17 4804

评论

发布
暂无评论
发现更多内容

前端开发的瓶颈与未来之路

keelii

node.js typescript ruby-on-rails 编程 前端

【Howe 学 JAVA】Java 类集框架2——Set 集合

Howe

Java 集合 set

C语言输入和输出

C语言技术网-码农有道

C语言 输入 输出

探寻融云多年领先的秘密:不断创新贴近开发者真实需求

DT极客

保险知识梳理

魁拔

保险 生活质量

物联网资产整合架构

老任物联网杂谈

物联网架构

【Howe 学 JAVA】Java 类集框架1——List集合

Howe

Java List 集合

“随大流”的你是不会成功的

小天同学

个人成长 思考 写作平台 感悟 坚持

OceanBase原理与实现分析

ElvinYang

Using R for everything: 方差分解(Variation partition)变量筛选与显著性标注

洗衣机用户不会用洗衣机

数据分析 R

高仿瑞幸小程序 06 layout布局

曾伟@喵先森

小程序 微信小程序 前端

深入理解MDL元数据锁

Simon

MySQL

放假了,你还会打开钉钉么?

无箭的丘比特

高效工作 团队管理 企业文化 个人成长 技术管理

C语言常量、变量和关键字

C语言技术网-码农有道

C语言 常量 变量 关键字

自助设备系列——技术应用

孙苏勇

产品 行业分析 智能设备

【Howe 学 JAVA】Java 类集框架2——集合输出

Howe

Java 集合 输出 类集

工具集系列 02|还在为海报设计、LOGO 设计发愁?这些在线工具值得收藏

一尘观世界

效率工具 设计 海报 课程封面 知识付费

当前的经济形势,如何让自己免于风险?

鼎玉谷

JavaScript 学习笔记——数据类型

zjlulsum

JavaScript, 前端 学习笔记 类型推断 入门

给应届毕业生们的七点建议

Neco.W

大学生日常 工作 应届毕业

C语言if分支结构

C语言技术网-码农有道

C语言 C语言if分支结构

如何扩大我们的英语词汇量

七镜花园-董一凡

英语学习

你还在这样使用MYSQL吗?

无箭的丘比特

MySQL 数据库 数据库规范 数据库设计

办公人员的 python 妙用——抽签结果提取

Sicolas Flamel

Python 远程办公

《Linux就该这么学》笔记(一)

编程随想曲

Linux

CentOS7使用Iptables做网络转发

wong

Centos 7 iptables

MacOS使用指南之我并不需要系统菜单栏

lmymirror

macos 高效工作 完美主义 操作系统 新手指南

C语言运算符

C语言技术网-码农有道

C语言 运算符

面试官竟然一直和我聊线程的启动和终止

Simon郎

大数据 后端 多线程 Java、

游戏夜读 | 游戏设计需要天赋?

game1night

带你100% 地了解 Redis 6.0 的客户端缓存

程序员历小冰

redis 缓存 redis6.0.0

云原生来袭,企业上云如何平滑迁移增效避险?

云原生来袭,企业上云如何平滑迁移增效避险?

JS引擎大PK:JSC vs V8 vs Hermes-InfoQ