epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.52k stars 340 forks source link

chore: improve select option render time #4355

Closed padinko closed 3 months ago

padinko commented 3 months ago

Description

Opening <VaSelect> with hundreds of items (tested 250) takes seconds to open when you click it.

Testing

For testing I used this code

```vue ```

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: image Times:

  1. opening first, yellow in screenshot = 1556ms
  2. opening second, blue in screenshot = 157ms
  3. 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

padinko commented 3 months ago

Thanks, i tried test with virtual-scroller and opening takes

but it is same for 250 or 5000 items so it stabilize render time for many items, but still 800ms is not usable from UX POV.