How could I improve my app performance with huge data

Hello everybody,

I’m using vue, vue router, vuex to build a web app for the internet of things. So far so good. Today I’ve encountered this problem that I need your help. The code base is complex, I will write only the example here.

Let’s say I have a Leaflet map, renders out ~500+ markers with a tooltip that shows data.

Then I have a slider, to get current time, the getLatestData(id) receives the ID of the marker and current time when the user clicks on the slider to find latest data it has.

// In component template
// https://github.com/KoRiGaN/Vue2Leaflet
<l-tooltip>
    <p
        v-for="(data, key) in getLatestData(id)"
        :key="key"
    >
        <strong>{{ data.value }}</strong> {{ data.unit }}
    </p>
</l-tooltip>

The huge data array was fetched and stored in vuex, look like this:

// In vuex store
const hugeData = [
    {
        data: [ { value: 24.1, unit: 'C'} ],
        id: '1a2b3',
        timestamp: 1517491562700,
    },
     {
        data: [ { value: 21.2, unit: 'C'} ],
        id: '4c5d6',
        timestamp: 1517527122840,
    },
    // ... from 1k ~ 20k more objects depend on how long user wants.
    // The longer period of searching, the bigger object.
];
// in methods
getLatestData(id) {
    if (this.hugeData.length) {
        const filteredSource = this.hugeData.filter(item => item.id === id);

        const bufferedRange = filteredSource.filter(item =>
          item.timestamp >= this.timeStart && item.timestamp <= this.timeEnd);
        const latest = maxBy(bufferedRange, ['timestamp']);
     
        return latest.data;
    }

    return [{
        value: 'No data',
        unit: '',
    }];
},

So far I can make it works, but when the hugeData array reach around ~10k objects, the app starts lagging and experience is terrible.

Have you had any solution to suggest, I really need your help. Thanks in advance.

Do you use this data only to display stuff? Or do you have mutate

You can use Object.freeze(hugeData) before adding intro vuex.

That makes Vue/vuex skip reactivity for the array and its contents, and make the array immutable, so it’s essentially read-only.

That should give you a nice performance boost.

If you have to mutate the array itself, you will have to replace the original with a shallow copy, with your changes, and frozen again.

4 Likes

Thanks LinusBorg.

It has a “Play” button where user can click play and the slider can run by itself, so I’ve built a small function to handle kind of “buffering”, preload data and push/merge with exist hugeData in vuex. So I think I will try to do the freeze before add to Vuex.

I will update here when I try it. Have nice weekend.

P/S: Do you know that your avatar is used as custom emoji in our company with tag :problem: LOL I did not realize and can not remember who done that but it’s so cool to see it again :smiley:

OMG are you serious? That’s hilarious :joy: and weird :thinking::sweat_smile:

PS: this is an actual image of me, with some comic filter on it. :wink:

3 Likes

This is amazing

1 Like

@LinusBorg I confirm that Object.freeze() done the trick. Thank you :heart_decoration:

2 Likes