Hermes: React-Native app is more faster on remote debugging

[carlosroberto555]

I did start a app with rn 0.60.3 and enabled Hermes.
I did make a simple app using react-navigation with only 3 screens with two Buttons in all screens.
When I use JS Dev Mode with true or false my app is slow, and enable js minify is still slow.
But when I enable Remote JS Debugging the app is very faster, like a native only.

It's anything with the remote debugging for improve performance?

[mhorowitz]

Can you describe your environment in more detail? In particular, are you running your app in a simulator (what kind?) or on device (what kind?)?

[sontb]

same here

[AlithAnar]

confirmed

[Inovassist-dev]

Yeah guys, same here...
Any idea of what can be happening?

[mhorowitz]

Without more information on the environment you are running in, it's hard to say for certain. I would be interested in hearing about what android environment you are using, and what the actual measured times are. That said, I have a few general observations.

When you use Remote JS Debugging, the JavaScript does not run on your phone or simulator. It actually runs on Chrome running on your development machine (laptop or deskop). Your dev machine is likely many faster than a phone. Running in a simulator will likely perform better than a real device, but it still will not be as fast as a local non-simulated environment.

When you use Hermes in a production build, the bytecode is compiled in advance and can be executed quickly. When you use Hermes locally with Metro, Hermes is running in a lazy compilation mode. This is faster than compiling all the bytecode every time you reload from Metro, but slower than a production build. So slowness in dev mode does not necessarily means slowness in release mode. If Metro were able to compile bytecode one module at a time and deliver it incrementally to the device, this would probably help, but we don't have a plan to do this on our roadmap right now. This would be a great project for someone who wanted to help make Hermes work better in development environments.

[ca-beller]

Yeah I'm having the same issue as well.

[carlosroberto555]

@mhorowitz this is a good explanation.
Makes all sense run faster when js code is runing on browser. It's faster like a fully native platform experience.
I did not tested production build yet, because I didn't had time, but I try tomorrow.
The results is with Hermes on, and I think with Hermes off more faster on config 1 and 2.

Configuration 1 (very slow)

JS Dev Mode: true
JS minify: false
Remote JS Debugging: false

Configuration 2 (slow)

JS Dev Mode: false
JS minify: true
Remote JS Debugging: false

Configuration 3 (inacreditable fast)

JS Dev Mode: true
JS minify: false
Remote JS Debugging: true

Configuration 4 (I think fast like config 3)

JS Dev Mode: false
JS minify: true
Remote JS Debugging: true

My device info:

Device: Moto G3
Processor: 1.4 GHz Quad Core
Android: 6.0
RAM: 1GB

More details on this technical page

[mhorowitz]

@carlosroberto555 thanks for the additional detail. It's not surprising that Chrome running on your laptop is faster than Hermes running on a device first introduced four years ago. I would expect JS in Chrome on your laptop to be faster than any JS engine on this phone. Have you tried this with Remote JS Debugging disabled and Hermes disabled?

[carlosroberto555]

Not yet, I'll try it tomorow too

[carlosroberto555]

I don't had time on last week for test, but I got theese configurations without hermes:

Configuration 5 without hermes (faster than config 1 and 2)

JS Dev Mode: true
JS minify: false
Remote JS Debugging: false

Configuration 6 without hermes (I think fast like config 3 and 4)

JS Dev Mode: false
JS minify: true
Remote JS Debugging: false

Without hermes I had performance improvement Remote JS Debugging disabled.
When I have time for test, I'll compare with --variant=release for get more results.

[carlosroberto555]

I've upgraded to from 0.60.3 to 0.60.4 and now configuration 2 seems a bit more fast

[tmikov]

When https://github.com/facebook/hermes/issues/73 is done, it might improve things.

[RichardLindhout]

For me it's slower too on debug, any result @carlosroberto555 from variant release?

[carlosroberto555]

@RichardLindhout I am working in another priorized project, but on this weekend I will try it

[RichardLindhout]

I'm trying it out a.t.m.

[RichardLindhout]

Wow definitely a lot faster, fastest version of my app I have ever seen!

[RichardLindhout]

I disabled hermes for now since the debug mode without remote debugging is too slow right know. Should not be a problem most of the time but the application I work on has some GPS features which I need to test outside. So connection breaks with the remote debugger ;)

[carlosroberto555]

We are waiting for enhancement that @tmikov says above with debug performance improves.
If have to make continuous tests on app is more easy disable hermes until finish then.
Sorry if I talk confuse, I'm learning english yet haha

[Ashkan-Oliaie]

thanks so much for this issue :D , I've been crying all day trying to uninstall and install modules and debugging :D till I found out about Hermes low performance

[WoodyWoodsta]

I stand to be corrected, but when the remote debugger is connected, the app does not use the target device's JS engine, but rather the debugger's. So when connected to the React Native Debugger, the JS engine is not Hermes (unless I have categorically misunderstood how RN works!). This would explain the speedup when connected to the debugger.

[RichardLindhout]

@WoodyWoodsta That is correct for the old JSC, but with Hermes it's also Hermes in Chrome I think.

[RichardLindhout]

You're maybe right. I think I misunderstood some debugging things here: https://engineering.fb.com/android/hermes/

[mhorowitz]

@WoodyWoodsta @RichardLindhout
If you use "Remote JS Debugging" you are getting a JS engine (v8) in Chrome. If you use Chrome's chrome://inspect mechanism to attach to Hermes, then you get Hermes. It is expected that the former will be faster than the latter. Your laptop is usually faster than your phone.

[WoodyWoodsta]

So if we use something like https://github.com/jhen0409/react-native-debugger, we're getting v8 as opposed to Hermes? (My guess is yes, since I've come across some actual differing behaviour between debugging/not-debugging in the past)

[mhorowitz]

I'm not familiar with that particular tool, but based on the documentation, I believe you are correct.

[RichardLindhout]

If you turn off JS Dev Mode the performance is acceptable without disabling Hermes or using the remote debugging.

[JManuelMT]

this is also happening to me in iPhone

[JManuelMT]

Hey guys in my case the createLogger and composeWithDevTools was the problem, It seems is saturating the memory (in debug mode there is no problem because you are using JS engine (v8) in Chrome as @mhorowitz said), remove that for prod

[vitto-moz]

maybe the reason is that in case of using "Remote Debugging" you have Chrome V8 as a javascript engine

[jjhampton]

I've also observed a significant slowdown when running my RN app (on Android _or_ iOS) in development mode, on a device, without the remote debugging turned on.

To add on to @carlosroberto555's comments, when I add --minify=false to my Metro Bundler command, the app seems to run much faster than before.

[tapz]

I just switched to a new development phone Samsung Galaxy A51 5G. My app runs EXTREMELY slowly under Hermes when using a debug version. It's almost impossible to use the app as the ui works so slowly. I have no idea what the debug mode causes Hermes to do under the hood as I'm not using a debugger and all I need in the debug mode is a proper stack trace. Maybe I just need to start developing in release mode as the debug mode in Hermes is totally useless.