Hermes is slower then JSC when using cached JSRuntime

[chufengma]

My React Native project is different from the official React Native project：I cached ReactInstanceManager when user leave the last ReactNative Activity. When the user enters the same page again, the cached ReactInstanceManager is used.

When I use jsc, it takes 200 ms for me to enter the same page the second time, but more than 500 ms for hermes.

I'm very interested in hermes, but this problem is blocking me now. Can you give me some help or ideas?

[axemclion]

We would love to help. Is there a way you could create a test project that is similar to your app ? That will help us recreate and investigate this scenario better.

[chufengma]

@axemclion Thanks very much

This is my demo project:

https://github.com/chufengma/HermesTestDemo

Time-consuming comparison between JSC and Hermes

run demo

Run with Hermes

// Run with Hermes
# gradle.properties
useHermesEngine=true
# shell
./gradlew installDebug

// Run with JSC
# gradle.properties
useHermesEngine=false
# shell
./gradlew installDebug

[axe-fb]

@chufengma - looks like there are some compile errors in the project - something around (ReactBuildConfig.DEBUG) not found at a bunch of places. Could you please look at them ?

[chufengma]

@axe-fb
Sorry, I added ReactBuildConfig to the .gitignore file. Please pull and try again.

[mhorowitz]

I don't know gradle very well. Is installDebug giving you the debug Hermes build, or the release build? The latter will perform better.

[chufengma]

@mhorowitz installRelease has the same problem.

[chufengma]

@axe-fb any updates?

[axe-fb]

Hey, I am still having trouble running the demo project - this time the error is around couldn't find "libun7zip.so"

Can I request you to remove all un-needed dependencies, and have a smaller repro, so that it is easier for me to run this project ?

Also, could you add a ReactMarker.addListener so that we can instrument all the other times that React Native takes ? This way, we will be able to separate React Native and Hermes concerns.

[axe-fb]

@chufengma - any update ? Wanted to take a look at this over the weekend.

[chufengma]

@axe-fb updated https://github.com/chufengma/HermesTestDemo today and remove some un-needed dependencies(I'm sorry it took so long to update -。-).

[axemclion]

@chufengma , I ran the tests 20 times, with updated ReactMarker listeners. I did not find that Hermes is slower. Here are the results.

Could you also get similar data, with the markers (sent you a PR) to see if you have a similar issue ?

Marker	JSC	Hermes
REACT_CONTEXT_THREAD_START	0	0
REACT_CONTEXT_THREAD_END	1	1
VM_INIT	1	1
VM_INIT	1	1
LOAD_REACT_NATIVE_SO_FILE_START	36	32
LOAD_REACT_NATIVE_SO_FILE_END	36	34
CREATE_REACT_CONTEXT_START	52	35
PROCESS_PACKAGES_START	54	39
PROCESS_CORE_REACT_PACKAGE_START	55	46
PROCESS_CORE_REACT_PACKAGE_END	60	47
CREATE_MODULE_START	67	47
CREATE_MODULE_END	69	47
CREATE_MODULE_START	69	47
CREATE_MODULE_END	69	48
CREATE_MODULE_START	69	49
CREATE_MODULE_END	72	49
CREATE_MODULE_START	72	49
CREATE_MODULE_END	72	50
CREATE_MODULE_START	72	50
CREATE_MODULE_END	73	51
CREATE_MODULE_START	73	51
CREATE_MODULE_END	74	51
CREATE_MODULE_START	74	51
CREATE_MODULE_END	74	52
CREATE_MODULE_START	74	52
CREATE_MODULE_END	75	52
CREATE_MODULE_START	75	52
CREATE_MODULE_END	75	53
CREATE_MODULE_START	75	53
CREATE_MODULE_END	76	54
CREATE_MODULE_START	76	54
CREATE_MODULE_END	77	55
CREATE_MODULE_START	77	55
CREATE_MODULE_END	79	56
CREATE_MODULE_START	79	56
CREATE_MODULE_END	80	56
CREATE_MODULE_START	80	56
CREATE_MODULE_END	80	57
CREATE_MODULE_START	80	57
CREATE_MODULE_END	81	58
CREATE_MODULE_START	81	58
CREATE_MODULE_END	82	79
CREATE_MODULE_START	82	79
CREATE_MODULE_END	100	80
CREATE_MODULE_START	100	80
CREATE_MODULE_END	101	80
CREATE_MODULE_START	101	80
CREATE_MODULE_END	102	81
CREATE_MODULE_START	102	81
CREATE_MODULE_END	102	81
CREATE_MODULE_START	102	81
CREATE_MODULE_END	103	82
CREATE_MODULE_START	103	82
CREATE_MODULE_END	103	82
CREATE_MODULE_START	103	82
CREATE_MODULE_END	103	82
CREATE_MODULE_START	103	82
CREATE_MODULE_END	103	83
CREATE_MODULE_START	103	83
CREATE_MODULE_END	104	83
PROCESS_PACKAGES_END	104	83
BUILD_NATIVE_MODULE_REGISTRY_START	104	84
BUILD_NATIVE_MODULE_REGISTRY_END	105	88
CREATE_CATALYST_INSTANCE_START	105	88
CREATE_CATALYST_INSTANCE_END	113	97
PRE_RUN_JS_BUNDLE_START	114	99
RUN_JS_BUNDLE_START	114	100
PRE_SETUP_REACT_CONTEXT_START	115	100
PRE_SETUP_REACT_CONTEXT_END	115	102
SETUP_REACT_CONTEXT_START	115	102
ATTACH_MEASURED_ROOT_VIEWS_START	116	103
ATTACH_MEASURED_ROOT_VIEWS_END	116	103
SETUP_REACT_CONTEXT_END	123	103
NATIVE_MODULE_INITIALIZE_START	123	103
INITIALIZE_MODULE_START	123	103
INITIALIZE_MODULE_END	123	103
INITIALIZE_MODULE_START	123	104
INITIALIZE_MODULE_END	123	104
INITIALIZE_MODULE_START	123	104
INITIALIZE_MODULE_END	123	104
INITIALIZE_MODULE_START	123	104
INITIALIZE_MODULE_END	123	105
INITIALIZE_MODULE_START	123	105
INITIALIZE_MODULE_END	124	105
INITIALIZE_MODULE_START	124	105
INITIALIZE_MODULE_END	124	105
INITIALIZE_MODULE_START	124	105
INITIALIZE_MODULE_END	124	105
INITIALIZE_MODULE_START	124	105
INITIALIZE_MODULE_END	124	105
INITIALIZE_MODULE_START	124	105
INITIALIZE_MODULE_END	124	105
INITIALIZE_MODULE_START	124	105
INITIALIZE_MODULE_END	124	105
INITIALIZE_MODULE_START	124	106
INITIALIZE_MODULE_END	124	106
INITIALIZE_MODULE_START	124	106
INITIALIZE_MODULE_END	124	106
INITIALIZE_MODULE_START	124	106
CREATE_MODULE_START	124	106
CREATE_UI_MANAGER_MODULE_START	124	106
CREATE_VIEW_MANAGERS_START	126	106
CREATE_VIEW_MANAGERS_END	161	106
CREATE_UI_MANAGER_MODULE_CONSTANTS_START	163	106
NATIVE_MODULE_SETUP_START	172	106
GET_CONSTANTS_START	172	107
CREATE_MODULE_START	172	107
INITIALIZE_MODULE_START	172	109
INITIALIZE_MODULE_END	172	112
CREATE_MODULE_END	172	114
CONVERT_CONSTANTS_START	187	114
CONVERT_CONSTANTS_END	187	118
GET_CONSTANTS_END	187	119
NATIVE_MODULE_SETUP_END	190	119
NATIVE_MODULE_SETUP_START	197	119
GET_CONSTANTS_START	197	119
CREATE_MODULE_START	197	119
INITIALIZE_MODULE_START	199	119
INITIALIZE_MODULE_END	199	119
CREATE_MODULE_END	199	119
CONVERT_CONSTANTS_START	200	119
CONVERT_CONSTANTS_END	200	120
GET_CONSTANTS_END	201	122
NATIVE_MODULE_SETUP_END	202	122
NATIVE_MODULE_SETUP_START	211	123
GET_CONSTANTS_START	211	123
CONVERT_CONSTANTS_START	217	124
CONVERT_CONSTANTS_END	217	124
GET_CONSTANTS_END	217	126
NATIVE_MODULE_SETUP_END	218	126
NATIVE_MODULE_SETUP_START	220	126
GET_CONSTANTS_START	220	127
CONVERT_CONSTANTS_START	220	127
CONVERT_CONSTANTS_END	220	128
GET_CONSTANTS_END	220	131
NATIVE_MODULE_SETUP_END	223	131
NATIVE_MODULE_SETUP_START	236	131
GET_CONSTANTS_START	237	135
CREATE_MODULE_START	237	135
CREATE_MODULE_END	238	135
CONVERT_CONSTANTS_START	239	135
CONVERT_CONSTANTS_END	239	136
GET_CONSTANTS_END	239	141
NATIVE_MODULE_SETUP_END	240	141
NATIVE_MODULE_SETUP_START	254	141
GET_CONSTANTS_START	254	141
CONVERT_CONSTANTS_START	255	141
CONVERT_CONSTANTS_END	255	142
GET_CONSTANTS_END	255	143
NATIVE_MODULE_SETUP_END	256	143
NATIVE_MODULE_SETUP_START	260	143
NATIVE_MODULE_SETUP_START	260	143
GET_CONSTANTS_START	260	143
CONVERT_CONSTANTS_START	260	143
CONVERT_CONSTANTS_END	261	144
GET_CONSTANTS_END	261	144
NATIVE_MODULE_SETUP_END	262	144
NATIVE_MODULE_SETUP_START	262	150
GET_CONSTANTS_START	263	151
CREATE_UI_MANAGER_MODULE_CONSTANTS_END	288	236
CREATE_UI_MANAGER_MODULE_END	295	246
INITIALIZE_MODULE_START	295	246
INITIALIZE_MODULE_END	296	247
CREATE_MODULE_END	296	247
INITIALIZE_MODULE_END	296	247
INITIALIZE_MODULE_START	296	247
INITIALIZE_MODULE_END	296	248
INITIALIZE_MODULE_START	296	248
CONVERT_CONSTANTS_START	296	248
INITIALIZE_MODULE_END	297	248
INITIALIZE_MODULE_START	297	248
INITIALIZE_MODULE_END	297	248
INITIALIZE_MODULE_START	297	248
ON_HOST_RESUME_START	325	271
ON_HOST_RESUME_END	329	274
INITIALIZE_MODULE_END	336	284
INITIALIZE_MODULE_START	336	285
INITIALIZE_MODULE_END	337	285
INITIALIZE_MODULE_START	337	285
INITIALIZE_MODULE_END	337	285
INITIALIZE_MODULE_START	337	285
INITIALIZE_MODULE_END	337	285
INITIALIZE_MODULE_START	337	285
INITIALIZE_MODULE_END	337	285
INITIALIZE_MODULE_START	338	285
INITIALIZE_MODULE_END	338	286
INITIALIZE_MODULE_START	338	286
INITIALIZE_MODULE_END	338	286
INITIALIZE_MODULE_START	338	286
INITIALIZE_MODULE_END	338	286
INITIALIZE_MODULE_START	338	286
INITIALIZE_MODULE_END	338	286
INITIALIZE_MODULE_START	338	286
INITIALIZE_MODULE_END	338	287
NATIVE_MODULE_INITIALIZE_END	338	287
CONVERT_CONSTANTS_END	345	290
GET_CONSTANTS_END	345	290
NATIVE_MODULE_SETUP_END	361	302
CREATE_REACT_CONTEXT_END	363	303
RUN_JS_BUNDLE_END	363	304
CHANGE_THREAD_PRIORITY	363	304
NATIVE_MODULE_SETUP_START	379	307
GET_CONSTANTS_START	379	307
CONVERT_CONSTANTS_START	379	307
CONVERT_CONSTANTS_END	379	307
GET_CONSTANTS_END	380	308
NATIVE_MODULE_SETUP_END	380	308
NATIVE_MODULE_SETUP_START	383	312
NATIVE_MODULE_SETUP_START	383	312
GET_CONSTANTS_START	383	313
CONVERT_CONSTANTS_START	384	313
CONVERT_CONSTANTS_END	384	313
GET_CONSTANTS_END	384	313
NATIVE_MODULE_SETUP_END	384	314
NATIVE_MODULE_SETUP_START	401	321
GET_CONSTANTS_START	401	321
CONVERT_CONSTANTS_START	402	321
CONVERT_CONSTANTS_END	402	321
GET_CONSTANTS_END	402	321
NATIVE_MODULE_SETUP_END	402	322
CONTENT_APPEARED	837	673

[chufengma]

@axemclion My problem is that when loading RN pages for the second time, Hermes is slower than JSC.

When I start my app, click the Load RN undle button, and through the ReactMaker I can see the data listed above. These data show that Hermes is faster than JSC without caching.

But when I press the return key to exit the RN page and click the Load RN bundle button again, this time using caching, Hermes is much slower than jsc, and at this time only the following logs can be seen through ReactMaker:

ON_HOST_RESUME_START null 0: 399215
ON_HOST_RESUME_END null 0: 399220
CONTENT_APPEARED CtripApp 41: 399977

[chufengma]

After upgrading to 0.2.1, the problem is solved.
Thanks @axemclion