Select unusable with a lot of data
-
Hi There,
During my performance testing with lots of data i found the following when using selects with a lot of data they are incredible slow to the point where they actually crash to browser.
https://jsfiddle.net/t5kmf68p/1/ --> select with 30k entriesWhat got me wondering was that the datatable even with a filter and more columns can still be used with this much data (not using conditional rendering).
https://jsfiddle.net/ydrouaz8/1/ -> datatable with 30k entriesThat got me thinking that there is maybe something one could do in regards to performance? I Know for this i should useh the q-autoselect over a q-input and will also use this(in that case), but i still think that there is a rendering speed issue which i just wanted to report.
Again, if i can help to trace some problems just tell me!
Cheers!
-
This will change with v1.0. The new QSelect is much smarter.
-
And let’s be honest. A select with 30k items isn’t really something that should be happening. If you need to select something from within such a large set of data like that, it should be a type of lookup field, which should be it’s own component and not a select/ picklist.
Scott
-
@s-molinari Scott is right.
-
And regarding the data table… that’s why there’s pagination!
Having 30k entries takes a whole lot of time just to add to DOM through vanilla JS…
Saying it’s a Quasar performance issue in this case is simply ridiculous. By using any framework it does not mean that the browser itself can run much faster with its basic operations. You as a developer has the responsibility to not render a million DOM nodes simultaneous on your page too then ask why it’s taking so long to render! There’s pagination, there’s autocomplete, … You just need a little imagination. -
That got me thinking that there is maybe something one could do in regards to performance? I Know for this i should useh the q-autoselect over a q-input and will also use this(in that case), but i still think that there is a rendering speed issue which i just wanted to report.
Aehm sorry guys just wanted to help you where i thought might be an issue in regards to performance, i dont actually use the select like that. i was just suspecting that there might be an issue when the table acutally renders pretty fast (also when using pagination all) and the select hangs. I just used this data size so that you might see that one could maybe increase the performance. Event with a few elements in the select a few ms here and there can always make a difference.
-
The QSelect in v1.0 works with any number of options (look at this example with 10k options: https://v1.quasar-framework.org/vue-components/select#Render-performance ). Not only the component can do much more, it’s really really fast now. There was someone even posting a video with his website using a LOT of QSelects with a LOT of options – and the comparison 0.17 to 1.0 is spectacular. v1.0 QSelects render almost instantly now
-
@rstoenescu that’s good to hear :).
