Thousands of rows performance

[fergardi]

Hello! I love Vue and use it in almost all my profesional and personal projects!

But now, I have a little problem. In my project, I have like 5k rows of data that need to updated in real time using live stock information by websocket. I usually use vue and vuex reactivity to handle this sort of stuff. I listen to channels and handle a message by callbacks which find an element in my array and update several of the fields in the object with the new information. It works fine with <100 rows, but after that, the performance decreases to a unusable state.

I've found several obstacles so far:

• Listening to thousands of different websocket channels at the same time.
• Printing thousands of v-for rows
• Storing thousands of rows in an array in vue/vuex

I wanted to ask for advices in how would be the best approach in solving this problem.

What I've tried so far:

• Vuex with store commit which finds and updates the desired row with new values.
• Own local service which stores the array of data and imports into the data () section offering reactivity.
• Ignore reactivity at all and use plain getElementById in the callback function to find and change the DOM with the new values.
• Object.freezing the object before storeing into vue/vuex in order to ignore watchers (but losing reactivity in the process, causing the DOM not to be updated at all).

What i've not tried so far:

• Infinite scroll directives/plugins/listeners.
• Clusterize.js.
• Showing only the rows inside the current viewport to save performance, but I need all the data to be updated without losing any packet at all times.

I find this issue really interesting, and I'll be glad to read all the suggestions anyone can offer.

Thank you in advance.

[csigmanek]

My advice: avoid putting everything in the store. Only put the things you actually need in the store and load the rest from a window object. E. g. window.data. Too much data really slows vue.js down. I tried a Clusterlibrary and its performance was extremely bad as long as i passed the data through props. When i worked with an event + storage in the window object, it worked just fine. Same goes for too much data in the store. Now i only put the data that is visible in the store and update it if necessary from the window object. It really improved the performance.