Does hermes make some specific optimized for React.js or related js framework?

[wanhongbo]

Hi,
I am trying to test the hermes to my android application but do not use RN.I added the related hermes
librarys and head files to my project and then after compiling and linking.It works in my application.
Previously I use the JavascriptCode as my js engine in my project and I make my test code like this:

            //const char *source = GetJSCode("/sdcard/vue.min.js", "");
            //const char *source = GetJSCode("/sdcard/react-dom.production.min.js", "");
            const char *source = GetJSCode("/sdcard/react.min.js", "");
            //const char *source = GetJSCode("/sdcard/af-appx.worker.min.js", "");
            {
                    //test js use Hermes
                    LOGD("Hermes Test case 2! source=%s",source);
                    std::string hermesJs(source);
                    auto jsiBuffer = std::make_shared<facebook::jsi::StringBuffer>(hermesJs);
                    auto runtime = facebook::hermes::makeHermesRuntime();
                    double start1 = now();
                    auto bytecode = runtime->prepareJavaScript(jsiBuffer, "whb test");
                    LOGD("Hermes  ByteCode Gen cost=%f!",now()-start1);
                    double start2 = now();
                    runtime->evaluatePreparedJavaScript(bytecode);
                    LOGD("Hermes evaluate bytecode cost=%f",now()-start2);
            }
            //test js use JSC
            {
                  std::string js(source);
                  std::string exeption;
                  ...
                  double start3= now();
                  context->ExecuteJavaScript(js, &exeption);
                  LOGD("JSC evaluate script cost=%f",now()-start3);
            }   

First,I try to use the react.min.js to feed the hermes and JSC,the data is below and looks good:

c++: Hermes  ByteCode Gen cost=12.038574!
c++: Hermes evaluate bytecode cost=0.323975
c++: JSC evaluate script cost=3.677734

then,I try to use the vue.js to feed the hermes and jsc,the data is below：

c++: Hermes  ByteCode Gen cost=6.109131!
c++: Hermes evaluate bytecode cost=40.747314
c++: JSC evaluate script cost=18.967041

The JSC is fast a lot than the hermes even JSC use the pure javascript string and hermes use the bytecode .

So,I wanna to know,does the hermes make some specific optimize for react related javascript?and worried about whether other javascript can benfit form hermes.

[mhorowitz]

Hermes optimizes for its primary metrics of startup time, size, and memory utilization. These aren't specific to React Native, but they were informed by it.

Hermes makes different trade-offs than other VMs in order to optimize for its core metrics. In particular, Hermes has no JIT (just in timer compiler), because JITs are mainly useful for improving the performance of longer running, CPU intensive programs. A JIT also consumes more memory than an interpreter. I expect that JS which is not React Native can benefit from Hermes, but not that Hermes will be an improvement for all possible JS programs.

Given the very long evaluation time of vue.js on both VMs which you have measured, I suspect that the JIT is kicking in and JSC execution benefits from this.

[mhorowitz]

Another observation (thanks to @jbower-fb) is that if you use prepareJavaScript() on device, you are not getting the most optimized possible code. This is a tradeoff to reduce on-device compilation time and is intended for simple code or testing on slow devices. For production use, the engine design expects that the JS source is compiled offline. You should use the command line hermes compiler, with the -O flag to generate bytecode with full optimizations.

Another optimization which RN uses which you can use, too, is to mmap the bytecode instead of eagerly loading it. https://github.com/facebook/hermes/blob/master/API/jsi/jsi/jsilib.h#L14 is some library code which will do this for you.