Performance issues with long lists

[iamohd-zz]

Hi

There is a noticeable performance issue when the list is long

Here is a case for the issue: https://codesandbox.io/s/9jjwmz7mwo

Thanks.

[riophae]

Thanks for your feedback! I'll look into this.

[siddhanntarora1992]

Hi,

Is there any update on this? I have a very long list of around 1000 elements, even while opening and closing the dropdown its very slow Thanks.

[rom1vtle]

Hi,

I have the same issue, with a very long list (1000 elements). It's slow on opening and closing the dropdown. Thanks

[leonzhu1985]

Same here. It is worse when use multi-select mode. I really like this treeselect, but this long list performance issue stops us to use it.

[almas]

Does this issue fixed?

[WQMDC]

Same here.It is slow when has 1000 item of list.How can I use lazy load or virsual dom ?

[sumanthkumr]

Hi Team, It is very slow when we use more than 1000 items in multi-select mode. is there any update on this thanks

[Meshz]

Hi, did you resolve this problem or did any of you find a workaround?

[MichalWi]

Hi, you can speed up performance so that is working with 5k entries.

The problem is that renderArrow() in Option.vue subscribes to computed property, to fix it:

Declare hasBranchNodes in treeselectMixin.js not as method in computed properties but as a normal non tracked one and then assign it in initialize

[MichalWi]

Also, I was able to further speed things up by breaking some functionality by removing: setupMenuSizeWatcher adjustMenuOpenDirection setupResizeAndScrollEventListeners

Now it is working on 10k entries, tested on M1 Mac

[kphan102]

I tried with the an array with 1500 records only ( 1500 cities in Germany) and the animation when open the menu is sluggish.

I even tried to remove the 3 methods that @MichalWi mentioned above but the animation is still delayed when open (I installed the package from @almas repository).

Do you guys know any way I can optimize further for this issue?

[almas]

Try my fork (https://github.com/dusal/vue-treeselect) with following parameters:

/**
  * For performance we can set a start search length. It doesn't run search until sat length. If there are thounds of options then this helps well.
  * default: 1
  */
 startSearchLength: {
   type: Number,
   default: 1
 },

 /**
  * For performance we can set a wait time for search. It wait between characters sat time and run search on time only last. It helps much options there.
  * default: 0
  * time measurement: millisecond
  */
 waitSearchFinishTime: {
   type: Number,
   default: 0
 },

[peterlupu]

Try my fork (https://github.com/dusal/vue-treeselect) with following parameters:

/**
  * For performance we can set a start search length. It doesn't run search until sat length. If there are thounds of options then this helps well.
  * default: 1
  */
 startSearchLength: {
   type: Number,
   default: 1
 },

 /**
  * For performance we can set a wait time for search. It wait between characters sat time and run search on time only last. It helps much options there.
  * default: 0
  * time measurement: millisecond
  */
 waitSearchFinishTime: {
   type: Number,
   default: 0
 },

seems to be working smoothly! will update if notice any problems thank you! <3