在后台选项卡上运行的实时 VueJs 3 应用程序的 Websocket 优化

Question

我有一个使用组合 API 在 VueJs 3 中实现的数据视图 Web 应用程序。数据来自多个点，由整数（它们的 Id）标识。

在应用程序中有一个页面，用户可以在其中查看许多不同点的最新测量值（同一屏幕中最多 1500 个点），这些点的值通过 Websocket 连接进行更新。 Websocket 消息中只有两个值，点 Id 和新测量值。

当我收到一条新消息时，我需要浏览所有显示的点的列表，看看消息中的点是否在屏幕上以及在哪里，以便我可以将其更新给用户。 主要问题是消息一直被接收（大多数点每分钟更新一次），对于每条消息，我需要找到它的点来更新它们的值。当正在运行的应用程序的选项卡位于后台时（用户位于另一个选项卡或另一个窗口中），这种情况会变得更糟，因为大多数浏览器对后台选项卡都有资源限制。

这是我的

webSocket.onMessage

函数的片段：

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;
            }
        }
    }

值得注意的是，

formattedData

是向用户呈现数据的反应列表，并且由于客户端规范，我需要根据用户选择的过滤器按特定顺序排列它。

综上所述，我有几个问题：

• 是否有更好的方法来存储这些数据，以便更快地找到我需要更新的点？
• 在一条单一消息中接收一批积分而不是每条消息接收一个积分是否有益（处理一条长消息还是多条短消息更好）？
• 当应用程序位于后台选项卡时，有没有办法不限制浏览器的资源？

Answer 1

我不认为此类应用程序的性能下降是由数据列表循环或传入 websocket 消息引起的。这很可能是由于对组件数据进行任何更改后模板更新工作造成的。最常见的问题是当您更改单个列表元素时整个模板元素列表的更新。

我建议直接关注这一点。关于性能分析和优化的官方提示是一个好的开始：Perfomance。

除了使用推荐的工具分析您的应用程序以更好地了解资源的使用情况之外，在这种情况下我肯定会做的一项优化是代码分割和记忆。

也就是说，如果您的点片段还不是单独的组件，请从它开始。然后仔细查看该组件依赖的 props 以及它们何时更新：请参阅 Props 稳定性。

控制模板元素何时更新的另一个好技术是使用

v-memo

指令 (v-memo)。这样（就像组件的 props 一样），您就可以控制特定的模板元素更新。

理想情况下，第一次加载后，您的页面不应比只有一个元素（需要更新的元素）的页面占用更多资源来更新。