Performance: Investigate impact of component rendering vs. still having the full row list in the vuex store on the frontend

[juliusknorr]

We should get a better overview on the frontend side to see where the bottlenecks are with 1k, 10k, 100k rows to know what implementation efforts have what impact.

• If the vuex store is handling the amount of rows reasonably well we may be able to just go with virtual scrolling for now to only render the rows that are actually visible
• Otherwise we may need Performance: Evaluate options to make the table/view row listing paginated #941 first to address frontend performance
• Important thing to check is the local filtering that may be applied on the full row list

[grnd-alt]

Testing with the firefox performance tool gave some useful insights:

I've tested the rendering of the whole list at once compared to getting the entire list in the store but just rendering the first 100 elements. The handling of the list itself has very little impact as the Rendering Time drastically improved with just 100 Elements. From between 22 to sometimes 30 seconds down to about 1-3 seconds. The Initial Backend request itself has not been calculated in, but takes up some time as well.

Though a lot faster, with just 100 elements rendered, the search filtering is still quite slow.

We can definitely noticeably improve performance on the Frontend side, but in the future customers might get to the limit of what browsers can handle

performance rendering all rows

performance rendering first 100 rows

[juliusknorr]

Thanks @grnd-alt How many rows in total did you have in your test scenario? I'd say if we can handle 10k rows reasonably well with virtual scrolling it would be worth to take that as an intermediate step until we figured out how to properly paginate the backend response. I'd say we can accept a slightly longer loading time on the initial request.

[juliusknorr]

We should also take the opportunity to add some documentation for the current state to the readme #448

[grnd-alt]

@juliushaertl I've had a little more than 10k rows. I think virtual scrolling is definitely a good first step. Should I open a PR on #279 ?

[ostasevych]

Hi! This is a very good incident. I have a table with 189 rows and the data are downloaded in webUI very slowly, and the page freezes.
The same with the Android app, which from time to time denies to show data with the error that the connection with the web app is lost.