Facebook发布全新JavaScript引擎：Hermes

468122151 发布于2019-08-26 10:13 / 2603人阅读

摘要：最近，一个崭新的引擎面世，它是在大会上发布用于在应用提高性能的，今天，我将进行全面介绍。自从年双十一正式上线，累计处理了亿错误事件，付费客户有阳光保险核桃编程荔枝掌门对微脉青团社等众多品牌企业。

摘要： 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、微脉、青团社等众多品牌企业。欢迎大家免费试用！

云服务器 GPU云服务器 javascript引擎 javascript游戏引擎 Hermes hermes 存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105809.html

RN 技术探索：Hermes Engine 初探

摘要：原方式中是经过压缩的脚本文件，预编译后则是二进制文件。两者影响叠加导致整体减小，包大小得到优化。引擎包引擎包官方文档中对内存区的描述您的应用用于处理代码和资源如字节码已优化或已编译的码库和字体的内存。本文首发自普惠出行产品技术自从 Google 的 Flutter 发布之后，Facebook 对 React-Native 的迭代开始快了起来，优化 React-Native 的性能表现...

Cc_2011 2019-08-26 10:44 评论0 收藏0
Facebook 专门推出的 Hermes 引擎性能并没有那么好

摘要：调研为专门推出的引擎。结论可以替换默认的引擎。官方给出的数据是白屏时间，从减少到，减少比例为。实际测试渲染包含个的的白屏时间包括初始化，从减少到，减少比例为。在计算性能方面，以引擎的为得分标准，得分比默认引擎低。调研 Facebook 为 React Native 专门推出的 JavaScript 引擎 Hermes。结论： Hermes 可以替换 Android 默认的 JS 引...

TZLLOG 2019-08-26 10:13 评论0 收藏0
Next.js 12 正式发布、Yarn 3.1 发布 | 淘系前端架构周刊 211101 期

摘要：配合下文中的重新构想原子化一起食用。浏览器支持文件格式支持需要用代码来筛选中所需的数据时非常实用，显著提高效率。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.ma...

focusj 2021-11-04 16:04 评论0 收藏0
JavaScript深入浅出第4课：V8引擎是如何工作的？

摘要：摘要性能彪悍的引擎。深入浅出系列深入浅出第课箭头函数中的究竟是什么鬼深入浅出第课函数是一等公民是什么意思呢深入浅出第课什么是垃圾回收算法深入浅出第课是如何工作的最近，生态系统又多了个非常硬核的项目。摘要：性能彪悍的V8引擎。《JavaScript深入浅出》系列： JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？ JavaScript深入浅出第2课：函数是一...

hsluoyz 2019-08-26 18:35 评论0 收藏0