Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix room list being laggy while scrolling 🐌 #7939

Merged
merged 4 commits into from
Mar 2, 2022
Merged

Fix room list being laggy while scrolling 🐌 #7939

merged 4 commits into from
Mar 2, 2022

Commits on Mar 2, 2022

  1. Fix room list being laggy while scrolling 

    Fix element-hq/element-web#21262

Optimizations:

 1. Don't update the `style` (positioning) of hidden tooltips
 1. Don't add DOM elements to the page for hidden tooltips

> ## 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`](https://github.com/matrix-org/matrix-react-sdk/blob/31f0a37ca2eeba6a6296787f2fcb33c4b26efebc/src/components/views/elements/Tooltip.tsx#L78-L81)
>
> The rendering calls [`src/components/views/elements/Tooltip.tsx#L101` -> `updatePosition`](https://github.com/matrix-org/matrix-react-sdk/blob/36adba101caf58afd280e6eedad003b38165be4f/src/components/views/elements/Tooltip.tsx#L101) which ends up as an expensive "Recalculate Style" because it uses [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/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 event 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`):
>
> ![](https://user-images.githubusercontent.com/558581/156273551-e744d3d6-93c6-4b07-bb12-6aad361f96a2.png)
>
>
>
> ### 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:
>
> <img src="https://user-images.githubusercontent.com/558581/156275644-bc26b1f5-5d99-4eae-b74b-c2028f2f1baf.png" width="300">
>
>
> 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`](https://github.com/passbolt/passbolt_styleguide/blob/1c5eddc9102c7cd1029d10dc6836af4722cdba61/src/react-web-integration/lib/InForm/InFormManager.js#L143)
> ```js
> 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.
>
> ![](https://user-images.githubusercontent.com/558581/156144998-8cf7686f-3c7b-42f8-8d81-ff780bae0ab5.png)
>
>
> #### 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/`
>
> ![](https://user-images.githubusercontent.com/558581/156275630-a53ef6a1-c058-4ac9-aa08-ae50b90e72c9.png)
>
> *-- element-hq/element-web#21262
    @MadLittleMods
    MadLittleMods committed Mar 2, 2022
    Configuration menu
    Copy the full SHA
    19aecc1 View commit details
    Browse the repository at this point in the history

  2. Add comments explaining more why on optimizations

    @MadLittleMods
    MadLittleMods committed Mar 2, 2022
    Configuration menu
    Copy the full SHA
    5e7f0d6 View commit details
    Browse the repository at this point in the history

  3. Fix up TooltipTarget tests

    @MadLittleMods
    MadLittleMods committed Mar 2, 2022
    Configuration menu
    Copy the full SHA
    c483a71 View commit details
    Browse the repository at this point in the history

  4. Fix lints

    @MadLittleMods
    MadLittleMods committed Mar 2, 2022
    Configuration menu
    Copy the full SHA
    b5e5f22 View commit details
    Browse the repository at this point in the history