You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Have over a thousand menus on the screen (e.g. a long list of non-virtualized elements)
Load the page with the profiler open
See many clearTimeouts tanking the performance
Describe the bug
We got a user report where the page loads quite slow for them. Turns out they're an outlier, but they still have about 900 entries in our system, each causing 2 Dropdown menus to be rendered on the screen (in a container with a scrollbar, but still).
After some digging, I saw that the Presence system seems to be the cause:
When a menu is still invisible and hasn't been interacted with, the timeout doesn't need to be cleared, but it's called regardless. The repro link is a JS benchmark that compares:
calling clearTimeout even with an undefined ID
checking if the ID is undefined before calling clearTimeout.
It seems that not calling it seems to bring a big performance boost (at least in the benchmark). I wasn't able to test this in reality (don't have a fork of redux-vue ready).
Expected behavior
Hundreds of (closed) Dropdowns not blocking the app for seconds / hundreds of milliseconds.
Context & Screenshots (if applicable)
The text was updated successfully, but these errors were encountered:
Environment
Link to minimal reproduction
https://jsben.ch/pvIYE
Steps to reproduce
Describe the bug
We got a user report where the page loads quite slow for them. Turns out they're an outlier, but they still have about 900 entries in our system, each causing 2 Dropdown menus to be rendered on the screen (in a container with a scrollbar, but still).
After some digging, I saw that the
Presence
system seems to be the cause:radix-vue/packages/radix-vue/src/Presence/usePresence.ts
Line 141 in ad43ecf
When a menu is still invisible and hasn't been interacted with, the timeout doesn't need to be cleared, but it's called regardless. The repro link is a JS benchmark that compares:
undefined
IDundefined
before calling clearTimeout.It seems that not calling it seems to bring a big performance boost (at least in the benchmark). I wasn't able to test this in reality (don't have a fork of redux-vue ready).
Expected behavior
Hundreds of (closed) Dropdowns not blocking the app for seconds / hundreds of milliseconds.
Context & Screenshots (if applicable)
The text was updated successfully, but these errors were encountered: