写点什么

JS 引擎大 PK:JSC vs V8 vs Hermes

  • 2019-07-24
  • 本文字数:1771 字

    阅读完需:约 6 分钟

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)Hermesreact-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-07-24 18:179122

评论

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

为什么联盟链系统没有“激励”?

CECBC

区块链

即构发布 LCEP 产品「RoomKit」 ,实现房间内0代码接入

ZEGO即构

SDS离全面EC(纠删码)还有多远?

XSKY星辰天合

存储

怎么理解Kafka消费者与消费组之间的关系?

李尚智

Java 大数据 程序员 架构

anyRTC新春大礼包

anyRTC开发者

音视频 WebRTC RTC

Clubhouse是个啥?一夜爆火一码难求

架构精进之路

七日更 2月春节不断更 clubhouse

JDK1.8升级这么久!Stream流的规约操作有哪些?

李尚智

Java 架构 jdk 函数编程

LeetCode题解:529. 扫雷游戏,BFS,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

架构师week11总结

Geek_xq

5分钟让你理解K8S必备架构概念,以及网络模型(上)

大数据 架构

函数式编程Stream接口真的有那么好用吗?

李尚智

Java 程序员 架构

“双循环”下的数字货币棋局

CECBC

数字货币

商务部CECBC专委会-商务联络部长王聚师:中医国际化的数字创新密码

CECBC

数字

重磅发布 | 3.4K Star可视化神器来啦

百度开发者中心

工具 可视化 #飞桨#

Kafka在哪些场景下会造成重复消费或消息丢失?

李尚智

Java kafka 程序员 架构 消息中间件

【得物技术】AB实验设计实现与分流算法

得物技术

算法 AB AB testing实战 实现 得物技术

图解分析:Kafka 生产者客户端工作原理

李尚智

Java 程序员 架构 kafak

安卓开发在线!Android面试吃透这一篇就没有拿不到的offer!大厂内部资料

欢喜学安卓

android 程序员 面试 移动开发

第十一周作业&总结

胡益

用 JSX 实现 Carousel 轮播组件

三钻

大前端 组件化 JSX

通过配置开关 Spring Boot 中的 @Scheduled 定时任务

和白白

Java 定时任务 springboot

做了6年的Android,Jetpack-MVVM-高频提问和解答,看看这篇文章吧!

欢喜学安卓

android 程序员 面试 移动开发

开发Kafka消费者客户端需要注意哪些事项?

李尚智

Kafka消费者提交消费位移时提交的是当前消费到的最新消息的 offset 还是 offset+1?

李尚智

Java kafka 程序员 架构 消息中间件

Kafka生产者哪些重要的参数是我们需要注意的?

李尚智

Java kafka 程序员 架构 消息中间件

🎨 HTTP 协议的前世今生

飞天小牛肉

Java 程序员 面试 计算机网络 2月春节不断更

【百度技术分享】San介绍以及在百度APP的实践

百度Geek说

Java JavaScript feed

百度亮相全球量子信息处理顶会QIP2021 推动全球量子科技进步

爱极客侠

架构师week11 作业

Geek_xq

重磅发布 | 2021年OpenAtom XuperChain开源技术路径

百度开发者中心

百度 #区块链#

LoraWan的第一个网关与设备

远鹏

物联网 IoT ChirpStack LoraWan

JS引擎大PK:JSC vs V8 vs Hermes_语言 & 开发_Bhaskar gyan vardhan_InfoQ精选文章