共计 1370 个字符,预计需要花费 4 分钟才能阅读完成。
摘要: JS 引擎开始升级了 …
- 原文:技术栈中的爱马仕?Facebook 发布全新 JavaScript 引擎:Hermes
- 作者:Carson_Ho
Fundebug 经授权转载,版权归原作者所有。
前言
- 目前,用户的流畅体验是用户能长期使用某个移动客户端应用 App 的重要指标之一,因此,移动客户端应用 App 的性能问题备受关注。
- 最近,一个崭新的 JavaScript 引擎面世:Hermes,它是 Facebook 在 Chain React 2019 大会上发布 & 用于在 React Native 应用提高性能的,今天,我将进行全面介绍。
1. 简介
Facebook 在 Chain React 2019 大会上发布的一个崭新 JavaScript 引擎
已开源 & 用于移动端 React Native 应用的集成
2. 作用
2.1 背景
- 用户的流畅体验是用户能长期使用某个移动客户端应用 App 的重要指标之一,因此,移动客户端应用 App 的性能问题备受关注
- 针对 React Native 应用,流畅度等性能问题一直被人诟病
2.2 问题
Facebook 基于多方性能数据分析,发现 JavaScript 引擎本身就是影响 React Native 应用启动性能的重要因素
2.3 解决方案
构建一个全新的 JavaScript 引擎,针对 React Native 应用,去提高移动客户端应用 App 的性能
特别注意:Hermes 主要面向移动端 React Native 应用的性能优化,对浏览器 & Node.js 等服务端基础架构并不适用。
3. 性能提升表现
对于 React Native 应用(基于 JavaScript 引擎)来说,用户感知最明显的性能体验包括:
- 应用程序可用的时间(TTI)
- 安装包下载大小(Android APK 大小)
- 内存利用率
根据 Facebook 给出的官方性能优化性能数据如下:
示意图
从上述数据可知,Hermes 引擎提升性能较为明显:
- 在应用程序可用的时间上,Hermes 能提升一倍的时间效率
- 在安装包下载大小下,Hermes 能减少 50% 的大小
- 在内存利用率上,Hermes 能节省 30% 的内存使用
4. 设计原理
为了提升 React Native 应用的性能表现,Hermes 引擎的设计主要是从是两个方面入手:编译方式 & 垃圾回收策略
4.1 编译方式
a. 字节码预编译
b. 无 JIT 编译
4.2 垃圾回收策略
5. 使用特点
在实际使用 Hermes 时,具备 3 个优点:懒编译、兼容性好 & 调试体验好,具体如下:
- 特别注意:在实际使用 Hermes 时,需对 build.gradle 文件做更改 & 重新编译
project.ext.react = [
entryFile: "index.js",
enableHermes: true
]
6. 总结
- 本文全面讲解了 Facebook 在 Chain React 2019 大会上发布的一个崭新 JavaScript 引擎:
Hermes
- 下面我将继续对
Hermes
引擎中的知识进行深入讲解,感兴趣的同学可以继续关注本人博客 Carson_Ho 的开发笔记
关于 Fundebug
Fundebug 专注于 JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js 和 Java 线上应用实时 BUG 监控。自从 2016 年双十一正式上线,Fundebug 累计处理了 10 亿 + 错误事件,付费客户有阳光保险、核桃编程、荔枝 FM、掌门 1 对 1、微脉、青团社等众多品牌企业。欢迎大家免费试用!