Scrolling the room list is laggy 🐌 #21262
Description
Scrolling the room list is laggy 🐌
Related issues:
- Room list: Loosely related performance investigations #14664
- Room list filtering is painfully slow #14750
- room switch time is slow on a ~10 page roomlist due to forced layouts in _restoreSavedScrollState #14574
Performance problems broken down
Hidden tooltips rendering on scroll
You can see that the Tooltip render is attached to the scroll event at src/components/views/elements/Tooltip.tsx#L78-L81
The rendering calls src/components/views/elements/Tooltip.tsx#L101 -> updatePosition which ends up as an expensive "Recalculate Style" because it uses Element.getBoundingClientRect(). This happens many many times within a single scroll event. Probably once for each tooltip within the room list even though no tooltips are even visible as I scroll. I can see that we're just updating the style attribute for a bunch of .mx_Tooltip_invisible elements at the end of the document.
Each one of the purple spans below the scroll span ends up as a call to updatePosition. And a scroll event takes 35ms to 60ms to complete which is way over the 16.6ms 60 FPS budget (on a powerful desktop PC), granted these times are with the performance profiling running. This is without the Passbolt extension explained below.
And the room list contains about 141 rooms (document.querySelectorAll('.mx_RoomTile').length):
Passbolt Chrome browser extension exacerbates the problem
In order to login to Passbolt, it requires a browser extension which defaults to mucking up all pages:
The extension source seems to be available: https://github.com/passbolt/passbolt_browser_extension
The Passbolt Chrome extension has a MutationObserver listening to all attribute and element changes to the whole <body> of the document so it can findAndSetAuthenticationFields (find form elements and autofill).
passbolt/passbolt_styleguide -> src/react-web-integration/lib/InForm/InFormManager.js#L143
this.mutationObserver.observe(document.body, { attributes: true, childList: true, subtree: true });This causes a bunch of Forced reflow because the Tooltip updatePosition is mutating the element style attribute and Passbolt MutationObserver callbacks are querying the whole DOM looking for form elements all in the same frame.
Under the scroll event, all of the little spans are the MutationObserver -> findAndSetAuthenticationFields. With the Passbolt extension, scrolling is verrrrry crunchy and bad.
Workaround
Instead of running Passbolt on all sites, we can enable the extension to only run on the domain for Passbolt instance itself. I'm guessing the Passbolt extension also does autofill stuff on sites but I always login manually to the Passbolt instance so this solution works for me 🤷
Extensions -> Passbolt -> Details -> Change Site access to On specific sites -> Enter in your Passbolt instance https://passbolt.example.com/
Potential solutions
Stop changing the style of hidden tooltips. This will stop massive number of callbacks and DOM manipulation from the Tooltip code. And we will no longer trigger the MutationObserver in the Passbolt extension listening for attribute changes. 🎉
Alternative is to only change Tooltip style in a window.requestAnimationFrame() callback which will do the DOM modifications in a much more opportune time (and once per frame).