From Application Performance and UX :
get application entry points and screen rendering under or as close to 250ms, with a goal of 100ms rendering from user interaction.
Status is React Native application and there are 3 main “layers” - threads: UI Thread, Native Modules Thread and JS Thread, so the time between user action and rendering is
t = NMt + JSt + UIt should be < 100ms
So we can see here 200ms, and this is the reason why we should look into JS thread first.
Another example loading a few messages in the chat
Let’s take a look closer what’s exactly happening here
in Status we use re-frame framework, it has a few separate phases
(1) Event dispatch - user action, then (2) Event is processed - business logic and the final step (3) run subscriptions (it’s like getting changed data for UI), reagent is running views functions and React is updating DOM
we should aim for the following: (2) event processing less than 20ms, subscriptions processing as less as possible like a few ms same for views
we have issues with both, so we need to do next major steps: 1 - move all business logic and computations from subscriptions to events, this might be tricky for some subscriptions, but we must do it , 2 - optimize events code or split them to smaller ones if needed
also, optimize views, 1- minimize the number of elements in views, 2 - minimize number of subscriptions, better to use one subscription in the root component than a few in child components, 3 - do not use subscriptions inside list items
this is what’s happening when you scrolling the chat messages when we have subscriptions in list items
Btw one good person made a very cool tool, and we can use it even on release build on real device with real numbers, so we can profile the app and see the results of optimizations
Here are some results from real android device with the release build
Signing in and receiving new messages
Opening new chat and scrolling
These results for a new account with a few chats and contacts, more time you will be using application more data you will have and the worse the numbers will be.
EPIC for performance optimizations https://github.com/status-im/status-react/issues/10383