Multiple seconds of lag when viewing/scrolling in specific Matrix room

[jonas-schievink]

Description

Scrolling in the #keepassxc:matrix.org room causes a large amount of lag, during which all inputs are ignored and at least 1 CPU core is pegged.

Steps to reproduce

• Join the room above with Element
• That should already reproduce it. If not, scroll upwards a bit.

Logs being sent: yes

Version information

• Platform: web

For the web app:

• Browser: Firefox 88.0.1
• OS: Arch Linux
• URL: app.element.io

[robintown]

I joined and the thing that stuck out to me were the large numbers of grouped membership events (lots of groups of 20–60 membership changes, at multiple points in the recent timeline). Here's a close-up of the flame graph I got from paginating those membership events in:

[robintown]

It looks like a large amount of that time is taken up by SettingsStore.getValue calls within shouldHideEvent. I might try replacing those with cached values from watchSetting to see if that could be a quick performance win.

[robintown]

@jonas-schievink I have made some general improvements to timeline rendering performance that should hopefully make this a lot better, and I encourage you to try them out at https://deploy-preview-6143--matrix-react-sdk.netlify.app/. However, I'm a bit worried that I'm missing some larger performance issue that you might be seeing, since in my testing I never experienced frozen input or multiple seconds of lag, as I've seen reported here and in #17573. If using the linked solution you still experience significant lag, please do another performance recording and attach either an export of the recording or a screenshot of the flame chart here so I can investigate further. (Flame charts are generally more useful than the waterfall view.)

[jonas-schievink]

The multi-second spikes seem to be gone now, although my flamegraph looks basically the same as the one you posted in #17537 (comment).

I'm now testing on a different room that has even worse performance issues, #glasgow:libera.chat, and switching to that room causes the spinner to flicker in and out of existence a lot, while also spending a lot of time in _getEventTiles, and causing a lot of lag while it's loading (giving maybe 1-2 frames per second on my machine until it is done loading).

Thanks for looking into this!

[robintown]

I can't personally test #glasgow:libera.chat since history is hidden in that room, so if you could upload a performance recording that would be great.

[jonas-schievink]

profile.zip

[robintown]

Thanks, I was able to fix those slowdowns too—please give https://deploy-preview-6143--matrix-react-sdk.netlify.app/ another try when you can!

[jonas-schievink]

That looks a lot better, nice! _getEventTiles is still showing up in the profile, but it isn't taking up nearly as much time as before.

I've attached another profile just in case you want to take another look:
profile.zip

[Citillara]

#libera:libera.chat has a LOT of join/leaves if you stay inside it, I had to close the channel to clear the lag