I hava a data-view web app implemented in VueJs 3, using composition API. The data comes from multiple points, identified by a integer, their Id.

In the app there is a page where the user is able to see the most recent measure for lots of diferent points (up to 1500 points in the same screen), where the value of these points is updated via Websocket connection. In the Websocket message there are only two values, the point Id and the new measure value.

When I receive a new message, I need to go trough a list of all the points being displayed, to see if the point in the message is on the screen, and where, so I can update it to the user.
The main problem is that messages are received all the time (most points update every minute), and for every message I need to find it’s point to update their value. This gets even worse when the tab of the running app is in the background (the user is in another tab or in another window), because of the resource limitation most browsers do for background tabs.

Here is a snippet of my webSocket.onMessage function:

webSocket.onmessage = async function (msg) {
        var msgJson = JSON.parse(msg.data);
        for (var i in formattedData.value) {
            if (formattedData.value[i].id == msgJson.pointId) {
                formattedData.value[i].measureValue = msgJson.measureValue.toFixed(2);
                break;
            }
        }
    }

It is important to note that formattedData is the reactive list that has the data being presented to the user, and because of client specifications, I need it on a specific order depending on the user selected filters.

With all this, I have a few questions:

• Is there a better way to store this data so it would be faster to find wich point I need to update?
• Would it be beneficial to receive a batch of points in one singular message instead of one point per message (is it better to process one long message or multiple short messages)?
• Is there a way to not limitate the browser’s resources when the app is in a background tab?