question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android application becomes super slow on startup after enabling Hermes

See original GitHub issue

Description

After enabling Hermes on my Android app in order to gain performance, the app becomes super slow. Specifically the startup time increases by 50%.

In my case startup time for the native thread sky rockets to 25.5 seconds from 17 seconds before. I am using @axemclion package to measure Android performance as mentioned in #26870 from @TheSavior . I am including logs and some initial troubleshooting below.

React Native version:

0.64.0-rc2 for me but this is the first version I was ever able to activate Hermes without issues as we use mobx symbols and 0.63.x did not work for me.

I suspect though this is something happening since Hermes was introduced as there are other issues as well complaining about performance being affected with Hermes enabled or disabled.

Steps To Reproduce

Not easy to provide that. Providing logs and traces though below.

Expected Results

I’m expecting actually to gain the same 50% that somehow is introduced with the use of Hermes instead of adding it as a delay 😃

Snack, code example, screenshot, or link to a repository:

So I am using @axemclion package to trace as mentioned before. That being said I am attaching the TTI_COMPLETE id over the View’s container that lands first over my app. This remains stable as I’m enabling / disabling Hermes. I’m acquiring the traces from the JS thread and more specifically from the AXE_PERFLOGGER that the package attaches over global variable.

I’m proving these trace logs over the 2 files attached below named marudy-0.64.0-rc2-hermes-disabled.log & marudy-0.64.0-rc2-hermes-enabled.log respectively.

I’m also providing an excel file where I pasted these logs and started working my way of investigating where the extra time is introduced. This can be found here. I’m conditionally showing with red background all the processes that take more than half a second to execute. The excel contains both of the runs and all the tasks executed; the first 566 lines are for the run with hermes disabled while the rest below for the run with hermes enabled.

As also mentioned in issue #26870 I have identified some initial observations from the logs provided:

  • So far I am seeing that the major delay is being caused by the processes with name GET_CONSTANTS_START. There are around 50 of them being executed in my case and until the TTI_COMPLETE event. Over the run without hermes ALL of them execute within the same ms or the very next one. Over the run with hermes enabled i’m suddenly seeing numbers all the way from 1-6ms which are the fastest ones up to 1121 , 2034 , 3707 ms. This is a huge increase as we can see and these are causing the biggest part of the delay.
  • On a 2nd note the process with name CHANGE_THREAD_PRIORITY also takes double the time it was occupying before. In my case from 567ms all the way up to 1132ms.
  • On a 3rd note the process with name CREATE_CATALYST_INSTANCE_END takes now 2034ms while before it was accounting for 26ms only.

marudy-0.64.0-rc2-hermes-disabled.log marudy-0.64.0-rc2-hermes-enabled.log

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:14
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

13reactions
diranolaleyecommented, Feb 22, 2021

I’m using react-native-cli: 2.0.1 and react-native: 0.63.4 and still having the same issue with android - very slow. @TheSavior: Please re-open the issue ticket

A solution: https://reactnative.dev/docs/hermes

7reactions
TheSaviorcommented, Jun 10, 2021

For people where this is slow, does the bundle you are executing contain JavaScript or is it bytecode? If it is JavaScript, then we’d expect that to be 2-5x slower, and probably means something is broken. When using Hermes the tooling should be creating bytecode bundles.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Optimize Your Android App Startup Time with Hermes
Long startup times and slow UX on Android can be one of the reasons your app gets bad rating and ends up being...
Read more >
Our app is 70% faster to load with Hermes! : r/reactnative
Just switching from JSC to Hermes made our app startup time go from 12.9s to 3.9s! ... but for lower end device, that...
Read more >
React Native application get slow after enabling Hermes Engine
Expect: The application become more faster after enabling Hermes Engine, or at least same as before. After enabling Hermes: ...
Read more >
App startup time - Android Developers
Users expect apps to be responsive and fast to load. An app with a slow start time doesn't meet this expectation, and can...
Read more >
Using Hermes - React Native
Edit your android/app/gradle.properties file and make sure hermesEnabled is true: # Use this property to enable or disable the Hermes JS engine.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found