Not long ago, Facebook in ChainReact 2019 Conference officially launched a new generation of JavaScript execution engine Hermes. Hermes is a compact and lightweight JavaScript engine, designed for running on Android React Native been optimized. For many applications, simply enable Hermes to shorten the startup time and reduce memory usage and reduce application size, in addition because it uses JavaScript standard implementation, so it is easy to integrate in React Native applications.
Here Insert Picture description
Hermes Introduction
Since ReactNative launch, a large number of APP to access and use, including the main business processes for large applications. With the rising complexity of business, performance issues become impossible to ignore.
When analyzing performance data, Facebook team found that the JavaScript engine is an important factor affecting startup performance and application package volume. Since JavaScriptCore was originally designed as a desktop browser, compared to the desktop, mobile end ability to have too many restrictions, in order to move from the bottom end performance optimization, Facebook team chose self JavaScrip engine designed Hermes, limited iOS AppStore audit limit, currently only for Android platform.
Chain React official conference presents a set of test data Hermes engine: '
From the start page to the user operable length: reducing (Time To Interact TTI) from 2.01s to 4.3s
download size of App, from 41MB to 22MB reduce
memory usage, reduced from 185MB to 136MB
can be found after the handover to the Hermes when loading long, App size and memory footprint three key indicators had improved significantly.
Here Insert Picture Description
Since Hermes is optimized for mobile applications, so we have no plans to integrate it into any browser or Node.js server infrastructure. In these circumstances the existing JavaScript engine is still the first choice.
Hermes optimization
in mobile application development, for the first time start to load, memory size, and application size is an important indicator of the quality of the application, so Hermes is also React Native applications are optimized from these areas.
Precompiled bytecode
Generally speaking, JavaScript engine will be resolved only after loading the JavaScript source code and generate the byte code, JavaScript code needs to be started only after the generated bytecode. In order to skip this step, Hermes introduced a pre-compiler, in mobile applications running build process. As a bytecode optimization time can be longer, so the bytecode smaller, more efficient. Now you can also do the optimization for the entire program, such as deleting duplicate data string and packing lists.
Bytecode is designed to be mapped at run-time memory and explained, without eagerly read the entire file. Many poor performance on low-end mobile devices flash memory I / O latency significantly increased, so the volume of demand loading optimized bytecode will significantly improve the TTI from the flash memory. In addition, due to the read-only memory mapped by file support, so do not use virtual memory mobile Caozuojitong (such as Android) can clear these pages out of memory, thereby reducing the kill the process on less memory device phenomenon .
Insert pictures described herein
byte code JavaScript source code although the compression ratio of the compressed slightly, but because of the smaller volume of Hermes native code, thus reducing the volume of Hermes React Native Android application program as a whole.
No JIT
In order to speed up the execution, the popular JavaScript engine can frequently interpreted code compiled into machine code, the work performed by the real-time (JIT) compiler.
Hermes now and no JIT compiler. This means that Hermes is not very good performance, especially those dependent on CPU performance benchmarks in some benchmarks. This design is intentional: The benchmark is difficult to reflect the actual workload of mobile applications. We also did some experiments JIT, but we think you want to get a real speed boost or to pay attention to the reality of the above indicators. Because JIT must be warmed up at the time the application starts, it is difficult for them to improve TTI, and may even damage the TTI. In addition, JIT native code will increase the volume and memory consumption, this will have a negative impact on our key indicators. JIT may be a drag on the metrics we are most concerned about, so we choose not to implement JIT.
Garbage collection policy
and efficient use of memory in mobile devices is very important. In general, low-end memory devices is often limited, so the operating system will be forced to kill applications that use too much memory. When used again after the application needs to be killed slowly restart, back-office functions will be affected. In early testing, we learned that when you run large applications on 32-bit device virtual address (VA) space, especially VA contiguous space can be a limited resource, even with the physical page allocation lazy did not help much .
Therefore, in order to try to optimize memory space and VA engines use, we constructed a garbage collector has the following functions, the main measures are:
DAMA: only in block form the VA space when needed.
Discontinuous: VA space is not necessary in a single memory range, which avoids resource constraints on the device 32.
Mobile: the ability to move objects means that you can defragment memory, blocks and are no longer required to return to the operating system.
Generational: JavaScript does not scan the entire heap at each GC, GC reducing time.
Integrated Hermes
Quick Start Hermes
Faceback team has the tools Hermes uploaded to npm: hermesvm. hemres tool can be run directly JS code, bytecode conversion and provides a lot of tuning control parameters.
For example, following the implementation of the code and hermesvm JS bytecode conversion function, as follows:
// Create hermes_test file contents: Print ( "This IS Hermes Demo");
vim hermes_test.js
// direct execution plaintext JS
~ / the node_modules / hermesvm / OSX-bin / Hermes hermes_test.js
This IS Hermes Demo
// 转换成bytecode
~/node_modules/hermesvm/osx-bin/hermes --emit-binary hermes_test.js -out hermes_test.hbc
// execute bytecode
~ / the node_modules / hermesvm / OSX-bin / Hermes hermes_test.hbc
This IS Hermes Demo
copy the code
is integrated in the new project
is currently Hermes React Native is an optional feature. If you want to enable Hermes, the need to ensure version React Native projects in 0.60.2 above, and also the need for android / app / build.gradle file and make the following changes.
= project.ext.react [
entryFile: "index.js",
enableHermes: to true
]
Copy the code
if the application has been built at least once, use the following command to clean up.
cd android && ./gradlew clean
copy the code
then you can normally develop and deploy applications.
react-native run-android
copy the code
inserted here Picture Description
debugging
in order to provide excellent debugging experience, we have implemented support for Chrome for remote debugging over DevTools agreement. Today, React Native also only supports JavaScript code in Chrome running within the application using a proxy application when debugging. With this support will be able to debug the application, but React Native bridge can not be synchronized Native call. Hermes to support remote debugging protocol allows developers to connect to Hermes engine running on their device, and uses the same engine as the production of native debug their applications. In addition to commissioning, we also consider implementing additional support for Chrome DevTools agreement.
Here insert a picture description
Hermes, JavaScriptCore contrast and the V8
after official data validation, key indicators Faceback team made compared to the previous JavaScriptCore program has improved significantly.
First, the size of the area of ex situ so files, RN depends so necessary libraries, Hermes reduced by about 16% JavaScriptCore (after a single architecture compression armeabi reduced by about 0.5M), V8 will have much greater than Hermes and JavaScriptCore.
Here Insert Picture description
After Next, is the memory of fluctuations, take RNTester engineering test page to enter the RN slid into several pages and exit, fluctuations in memory of the comparison can be seen, V8 and Hermes memory growth to be more smooth.
Here insert a picture description
followed by CPU fluctuations, then take RNTester engineering test page to enter the RN slid into several pages and exit, compared to CPU fluctuations. Hermes significantly better than the V8 and JavaScriptCore. ,As shown below.
Here insert a picture describing
the presence of Hermes problem
compared to JavaScriptCore speaking, Hermes does have many advantages, but it is not necessarily good to say JavaScriptCore, carried out with the testing and integration, the question Hermes brought gradually.
bytecode files occupy too large size
to pass the test, Hermes compiled bytecode files than 100% increase js plain text file. Thus, the package will hit the large RN, RN and incremental package made dynamic, since binary file the diff, differential efficiency decreases.
To solve this problem, we according to the characteristics of Hermes, to change their thinking into the bytecode compiler of Hermes clients do, while the client js storage and bytecode files compiled bytecode if you use Hermes, otherwise still use JavaScriptCore.
Hermes open source project provides complieJS method bytecode compiler, but this code is not part of the default package to the RN Hermes engine, we have a little consolidation, packaging, through JNI exposed for business use.
Perform time-consuming plain text js long
before the client js to convert plain text into bytecode, we let Hermes load plain text. But the real test he discovered that Hermes loading performance plain text JavaScriptCore slower than the nearly 30%. The main reason is Hermes JIT delete function, resulting in code that runs slower on plain text js.
Continuous optimization
in order to simplify the migration of Hermes and continues to support the work on iOS JavaScriptCore, we constructed JSI; it is a lightweight JavaScript engine for embedding API in C ++ applications. This API enables engineers to realize their React Native infrastructure improvements. Fabric JSI on the use, it can preempt React Native presentation; TurboModules JSI also used, which reduces the volume of the original module to be lazy loading required React Native application.
Related Links: