-
-
Notifications
You must be signed in to change notification settings - Fork 988
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.
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
Performance degrades significantly as number of options increases #94
Comments
This is a known problem among most select libraries. Handling thousands of options is simply heavy. In this case, the initial time will be quite long, as Vue needs to transform and bind all the options. After the bootstraping is done it should be a bit better, but still not good enough. You either need to use virtualization or limit the number of options displayed. The second idea is actually quite good imo, because why should anyone want to scroll through thousands of options. This is also quite easy to implement, as I would only need to return the first ~100 options that match the search query. @rstuart85 What do you think about this approach? |
@shentao The limiting of options sounds like a good idea. Without looking at the code myself yet, two things come to mind:
|
@rstuart85
Would the work for you, at least for now? |
Ping @rstuart85 :) |
@shentao Will get back to you on this shortly. |
You can now pass the |
@shentao What about using a library such as https://github.com/tangbc/vue-virtual-scroll-list? This would require a custom template (scopedSlot) for the wrapper |
@johannes-z Did you attempt to use the vue-virtual-scroll-list with this multiselect? What were the results? |
@johannes-z I’m currently working on the 3.0 release which should be much more flexible and allow for virtual-scrolling among other things. |
@shentao When is going version 3.0 to release, since Vue 3 is the default version? |
When you pass a MultiSelect component an options list of a couple hundred, everything works as expected and there is minimal lag. However, when you get into the thousands, the component is unusable, even when using it as a basic select.
I've yet to dive into why the performance is so bad as the number of items goes up (it feels like n^2 performance), but I thought it might be good to capture the issue first.
The text was updated successfully, but these errors were encountered: