javascript - Websockets blob 解码的性能导致内存问题

Question

我最近在工作中遇到了 Javascript 性能问题导致崩溃。为了实现应用程序现代化，我们正在考虑将应用程序作为网络服务器运行，我们的客户端将通过浏览器(chrome、firefox...)连接到该服务器，并将所有界面作为 HTML+JS 网页运行。

为了让您概述我们的性能需求，我们的应用程序从相机源运行图像处理，在某些情况下以超过 20 fps 的速度运行，但在大多数情况下最高约为 2-3 fps。

基本上，我们有一个用C++编写的Web服务器，它进行HTTP请求，并向用户提供界面的HTML页面和应用程序相应的JS脚本。为了简化两个应用程序之间的通信，然后我在网页和 C++ 服务器之间打开一个 Web 套接字来来回发送格式化消息。这些消息可能非常大，最多可达几个 Mo。

只要 FPS 保持相对较低，一切都可以正常工作。当 fps 增加时，会发生以下两件事。

1. C++ 网络服务器内存占用量增加得相当快，当没有更多可用内存时就会崩溃。经过调查，这种情况发生在网络使用满、websocket缓存满的情况下。我认为这是由于 websocket TCP-IP 的处理方式造成的，因为套接字必须等待消息发送和接收才能发送下一条消息。
2. 或者浏览器在一段时间后崩溃，显示“哦快照”屏幕(见下图)。在这种情况下，似乎或多或少会发生同样的事情，但这一次似乎是由于垃圾收集策略所致。下图显示了应用程序运行时内存使用情况的打印屏幕，清楚地显示了锯齿状图案。这似乎表明垃圾收集正在以越来越远的间隔进行工作。

我已将问题归结为每秒快速发送非常大的消息(>100Ko)。消息越大，发生的速度就越快。为了使用我收到的消息，我启动一个 Web Worker，将收到的 Blob 传递给 Web Worker，WebWorker 使用 FileReaderSync 将消息转换为 ArrayBuffer，并将其传递回主线程。我预计这会在幕后有相当多的副本，但我还不太精通 JS，所以无法确定这个声明。另外，我最初在没有 webworker (FileReader) 的情况下做了同样的事情，但帧率和 CPU 使用率真的很糟糕......

这是我调用的用于解码消息的代码:

function OnDataMessage(msg)
{
    var webworkerDataMessage = new Worker('/js/EDXLib/MessageDecoderEvent.js'); // please no comments about this, it's actually a bit nicer on the CPU than reusing the same worker :-)
    webworkerDataMessage.onmessage = MessageFileReaderOnLoadComManagerCBack;
    webworkerDataMessage.onerror=ErrorHandler;
    webworkerDataMessage.postMessage(msg.data);
}

function MessageFileReaderOnLoadComManagerCBack(e)
{
    comManager.OnDataMessageReceived(e.data);
}

和网络 worker 代码:

function DecodeMessage(msg)
{
    var retMsg = new FileReaderSync().readAsArrayBuffer(msg);
    postMessage(retMsg);
}

function receiveDecodingRequest(e)
{
    DecodeMessage(e.data);
}

addEventListener("message", receiveDecodingRequest, true);

我的问题如下:

1. 有没有办法让 GC 不必收集这么多内存，例如告诉我使用的某些部分重用缓冲区而不是重新创建它们，或者保持 GC 工作间隔固定？这是我知道如何在 C++ 中做的事情，但在 JS 中？

2. 我应该使用另一种方法来处理我的大负载吗？请记住，传输速度应尽可能快。

3. 是否有另一种方法可以比我更快地将 blob 数据读取为数组缓冲区？

提前感谢您的帮助/评论。

Answer 1

事实证明，内存问题是由于 WebWorker 中新的 WebWorker 行和新的 FileReaderSync 行造成的。

删除这些极大地提高了性能!

此外，如果我想使用 websocket 作为数组缓冲区，则不需要此解码操作。我只需要将websockets的binaryType属性设置为“arraybuffer”...

总而言之，这是解决***问题的一个非常简单的解决方案:-)