Tips for long lists?
-
Hi! I’m using QList with potentially a lot of items in Cashier pwa to display the list of accounts.
The performance with circa 500 items being loaded from IndexedDB and loaded into the list is pretty bad. It takes several seconds to load and clicking the buttons in the toolbar take a few seconds too.
The performance of the list in the Select input, with the same data, is excellent, though.
I’m pretty sure I’m missing something here and there is a better way to do this.The source for the page displaying the accounts is here: https://gitlab.com/alensiljak/cashier/blob/master/src/views/Accounts.vue
Any tips about optimizing list behaviour with Quasar v1 (beta24) is welcome! This could also be a general tip about lists.
I’m guessing that rendering all the nodes should not be necessary on start and I should look into the source of QSelect.
-
I use
vue-virtual-scrollerto solve this problem. -
Wonderful, I’ll try it out. It looks good in the demo. Thank you, @morlz !
-
There is also this component in Quasar.
https://v1.quasar-framework.org/vue-components/infinite-scroll
Scott
-
@s-molinari, QInfiniteScroll just loading more data, this is not a virtual list.
Virtual list replace nodes that are out of viewport with white space likemargin.
This solves a performance problem if the page has a large list. (500 000 simple nodes or more 500 components in v-for which render more than 0.5 ms per item) -
Don’t really understand why the performance of clicking on QList has to be >O(n). In this example https://codepen.io/virtuecoder/pen/MWaRewL?editors=1010 clicking on 10 000 QList takes more then 2 seconds, while clicking on the plain div list takes less then 100ms.
QVirtualScroll is great improvement for that scenario but not ideal. There is a lag before the next set of items shows on the list while scrolling resulting in a choppy experience.
So unfortunately, I find the best solution at the moment is not to use QList for such big collections of items.
