Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
As you can see there are 3 selects all rendering same 250 items.
First one renders native VaSelect.
Second render VaSelect with overrided #option slot to render option with simple component.
Third is compare with vue-select component.
Here is timeline from vue devtools for opening all of this selects:
Times:
opening first, yellow in screenshot = 1556ms
opening second, blue in screenshot = 157ms
opening vue-select, red in screenshot = 0.2ms
From this testing it looks like component <VueSelectOption> takes much time to render.
From my first quick look, selected icon is rendering always (hidden) so I tried only skip rendering selected icon when not needed and rendering it goes down to 798ms (-48.2%).
This change is in this pull request.
This is better but it is still a lot of time to open select. For me 250 items is not a lot of items to render and vue-select can open it under 1ms.
So this is only 1st step, but it needs better refactor for rendering selects options. For example prerender options, so it do not need to building all options on opening. Or optimize VueSelectOption to have better render time (closer to 157ms from second second test option) but I am afraid it will not be good with more options.
Types of changes
[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[x] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
Description
Opening
<VaSelect>
with hundreds of items (tested 250) takes seconds to open when you click it.Testing
For testing I used this code
As you can see there are 3 selects all rendering same 250 items. First one renders native VaSelect. Second render VaSelect with overrided #option slot to render option with simple component. Third is compare with vue-select component.
Here is timeline from vue devtools for opening all of this selects: Times:
From this testing it looks like component
<VueSelectOption>
takes much time to render.From my first quick look, selected icon is rendering always (hidden) so I tried only skip rendering selected icon when not needed and rendering it goes down to 798ms (-48.2%).
This change is in this pull request. This is better but it is still a lot of time to open select. For me 250 items is not a lot of items to render and vue-select can open it under 1ms. So this is only 1st step, but it needs better refactor for rendering selects options. For example prerender options, so it do not need to building all options on opening. Or optimize VueSelectOption to have better render time (closer to 157ms from second second test option) but I am afraid it will not be good with more options.
Types of changes