Repository navigation
[HOLD for payment 2021-09-06] [HOLD for payment 2021-09-01] [Performance] [Audit]: using react-native-render-html composite architecture could speed up render time of short report actions by 32% #4123
Description
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Upwork job link: https://www.upwork.com/jobs/~0157cdae32a7b23e69
This report is part of #3957, scenario "Rendering Individual chat messages".
Flamegraph
Basically, using the explicit composite architecture means that all components on top of RenderHtmlSource, starting with TRenderEngineProvider, would be put either at the root of the ReportScreen, or near the root of the application instead of being replicated for each report action.
In the above flamegraph, the rendering time of those composite components is 7.3ms - 5ms = 2.3ms. If those component were factored out, it would mean a net gain of 2.3 / 7.3 = 32%.
Activity
MelvinBot commentedon Jul 16, 2021
Triggered auto assignment to @NicMendonca (
AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.marcaaron commentedon Jul 16, 2021
32% sounds like a lot but also is this 32% of 7ms total or per each comment in the chat? (I think it must be the latter)
Maybe there is a way to dumb this down, but it's hard for me to wrap my head around what this means for the perspective of loading a chat that has something like 50-100 messages.
So, let's say we are rendering 100 when the chat loads and there is 730ms of time spent here - that would then become 230ms? Seems pretty significant if it was happening in sequence, but we are also rendering in parallel? Is there some easy way to tell how much user time this will save once implemented?
jsamr commentedon Jul 16, 2021
@marcaaron
Per message indeed.
It would be my understanding that it would save up 230ms in this scenario; not sure I'm understanding the parallel thing?
I think your 230ms estimate is reasonable for a 100 messages scenario!
jsamr commentedon Jul 16, 2021
PS: I used beta-8 branch for this flamegraph; I previously noticed a bug in alpha-10 (main branch) where
RenderHtmlwas rendered twice. Did not reproduce in beta-8 thus did not bother report 😅marcaaron commentedon Jul 16, 2021
Got it. I think my question makes no sense because the actual rendering is not happening asynchronously and when we're talking about "rendering time of those composite components" only one can be rendering at a time because JavaScript.
jsamr commentedon Jul 26, 2021
@marcaaron I'm ready to have a look into this one this week. Ping me when a Job is ready on Upwork!
MelvinBot commentedon Jul 26, 2021
Triggered auto assignment to @michaelhaxhiu (
External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.michaelhaxhiu commentedon Jul 28, 2021
I'll work on posting this job to upwork shortly. Let me double check with @puneetlath and @marcaaron a few things and drop a note here after.
22 remaining items
MelvinBot commentedon Aug 9, 2021
@jsamr, @marcaaron Eep! 4 days overdue now. Issues have feelings too...
marcaaron commentedon Aug 10, 2021
Just testing out the draft branch now with manual testing. Seems like it's about 20ms faster on average to switch chats with the new branch (so pretty small difference). Unsure if there's some other test we want to do here like the one suggested here.
perf: use explicit composite architecture for RenderHTML component
michaelhaxhiu commentedon Aug 12, 2021
@marcaaron should we start the 7 day counter for payment, or is this going to be re-opened for additional related work?
michaelhaxhiu commentedon Aug 23, 2021
Going to send payment, as no regressions have been identified. Sorry for the wait @jsamr it's been a busy few weeks on this side :)
jsamr commentedon Aug 23, 2021
@michaelhaxhiu no worries!
[-][Performance] [Audit]: using react-native-render-html composite architecture could speed up render time of short report actions by 32%[/-][+][HOLD for payment 2021-09-01] [Performance] [Audit]: using react-native-render-html composite architecture could speed up render time of short report actions by 32%[/+][-][HOLD for payment 2021-09-01] [Performance] [Audit]: using react-native-render-html composite architecture could speed up render time of short report actions by 32%[/-][+][HOLD for payment 2021-09-06] [HOLD for payment 2021-09-01] [Performance] [Audit]: using react-native-render-html composite architecture could speed up render time of short report actions by 32%[/+]