v-for performance issue

[carbon-projects]

hi, I have a table with a 300 row *60 column, using V-for's rendering is very slow, how to improve efficiency?

[zigomir]

@petersn-github I think your description lacks details. It would help a lot if you tell a bit more and/or show an example through JSBin or similar tool so one can see what is going on in your case.

[yyx990803]

This is somewhat inevitable, the cell count is simply too large. There's currently no simple way to make it magically fast.

There are two possible ways around this:

1. Rethink your UI design. Do you really need 18,000 cells all rendered at the same time? Does it even make sense? How about pagination?
2. Do you need interactivity on every single cell? If not, you can scrap v-for and write your custom directive that simply renders the table with innerHTML. Or maybe you shouldn't be using Vue to render it in the first place.

[smolinari]

I am also interested in listing large amounts of data for reports. However, no real interactivity is needed, except for regular linking. I would imagine this is possible without any kind of performance issues? What would be the best practice to include such a large set of data into a vue?

Scott

[yyx990803]

@smolinari pagination is probably the most reasonable solution, both performance and UX wise. The real bottleneck is how many items are rendered on the page at the same time. Just limit it to a reasonable amount.

I might work on a "virtual scroll list" where it only renders items in the viewport in the future.

[smolinari]

Pagenation for a report isn't really good usability.

The reports we are looking at would be limited to a maximum of 2000 or maybe 2500 rows, but there could be up to 15 columns. A lot of data, yes, but any decent reporting system would need to show that amount. Maybe need to come up with a completely different way to show this data? Hmm...maybe some sort of infinite scrolling might be the answer?

Scott

[yyx990803]

I don't think any web framework can handle that many cells with acceptable rendering performance (assuming it's reactive instead of static HTML). So yeah, you have to do some dirty work to implement infinite scroll or virtual scroll.

[KennedyTedesco]

@yyx990803 I'm having the same Issue with 200 records, it cost almost 6s to render. It would be great a way to render without data binding ... This make any sense?

[yyx990803]

@KennedyTedesco 6s for 200 records doesn't sound right. I assume you have more nested v-for? What does the template look like?

[KennedyTedesco]

@yyx990803 Sorry, my mistake. For my happiness the problem wasn't on Vue.

[PrimozRome]

@yyx990803 I am experiencing the same issue with only 50 records but not sure is it my problem or Vue's. Described here http://forum.vuejs.org/topic/3888/long-render-time-v-for.

[PierBover]

I've hit this problem and if you really must show all these records at the same time the simplest solution is to use divs instead of a table.

Render time in my case was reduced from 2 seconds to 100ms (aprox) for about 5500 rows * 8 columns (44000 cells).

But like @yyx990803 said usually the best option is to question whether you should be really painting all those cells. The are very few cases where showing all the data is justified and these are edge cases which need to be handled with care.