preface

  • At present, the user’s smooth experience is one of the important indicators that users can use a mobile client App for a long time. Therefore, the performance of mobile client App has attracted much attention.

  • Recently, a new JavaScript engine has been released: Hermes, which Facebook unveiled at the React 2019 Chain Conference & for improving performance in React Native apps. Today, I’ll cover it all.


    Schematic diagram

directory


Schematic diagram

1. Introduction

Facebook unveiled a new JavaScript engine at Chain React 2019

Open source & integration of React Native applications on mobile


Schematic diagram

2. The role

2.1 background

  • The user’s smooth experience is one of the important indicators that users can use a mobile client App for a long time. Therefore, the performance of mobile client App is of great concern
  • React Native applications have been criticized for performance issues such as fluency

2.2 the problem

Based on multiple performance data analysis, Facebook found that the JavaScript engine itself is an important factor affecting React Native app startup performance

2.3 Solutions

Build a new JavaScript engine for React Native apps to improve the performance of mobile client apps

Note: Hermes is primarily optimized for mobile React Native applications, but not for server infrastructures such as browser & Node.js.

3. Performance improvement

For React Native applications (based on the JavaScript engine), the most obvious performance experiences that users perceive include:

  • Time available to the application (TTI)
  • Installation package download size (Android APK size)
  • Memory usage

The official performance optimizations from Facebook are as follows:




Schematic diagram

According to the above data, the performance of Hermes engine is significantly improved:

  • Hermes doubles the time efficiency in terms of the time available to the application
  • Hermes can be reduced in size by 50% at install pack download size
  • In terms of memory utilization, Hermes saves 30% on memory usage

4. Design principles

In order to improve the performance of React Native applications, the Hermes engine was designed from two aspects: compilation method and garbage collection strategy

4.1 Compilation Mode

A. Bytecode precompilation


Schematic diagram

B. JIT – free compilation


Schematic diagram

4.2 Garbage collection Strategy


Schematic diagram

5. Use characteristics

There are three advantages to using Hermes in practice: lazy compilation, good compatibility and a good debugging experience, as follows:




Schematic diagram

  • Special note: for actual use of Hermes, the build.gradle file needs to be changed & recompiled
project.ext.react = [
  entryFile: "index.js",
  enableHermes: true
]
Copy the code

6. Summary

  • Here’s a full look at a new JavaScript engine Facebook unveiled at Chain React 2019:Hermes
  • So I’m going to continue with thisHermesEngine knowledge for in-depth explanation, interested students can continue to pay attention to my blogDevelopment notes for Carson_Ho

Thumb up, please! Because your encouragement is the biggest power that I write!

The Android event distribution mechanism is the most comprehensive and easy to understand solution for Android screen adaptation. It is the most comprehensive and easy to understand solution for Android screen adaptation. Android development: JSON introduction and the most comprehensive analysis method! BroadcastReceiver Is the most comprehensive version of Android’s BroadcastReceiver

Welcome to attentionCarson_HoJane books!

Share the dry things about Android development from time to time, the pursuit of short, flat, fast, but there is no lack of depth.