The story about 100ms

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

image

All business logic is running on the JavaScript thread, let’s take a look at it, for example, opening empty chat with no messages

image

So we can see here 200ms, and this is the reason why we should look into JS thread first.

image

Another example loading a few messages in the chat

image

Let’s take a look closer what’s exactly happening here

in Status we use re-frame framework, it has a few separate phases

image

(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

image
this is what’s happening when you scrolling the chat messages when we have subscriptions in list items

Btw one good person :wink: 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

image > image > image

Opening new chat and scrolling

image > image

Switching tabs

image

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

8 Likes