Websockets解码中导致内存问题的性能

Question

我在Javascript中有一个性能问题，最近在工作中造成了崩溃。随着应用程序现代化的目标，我们正在考虑将我们的应用程序作为we服务器运行，我们的客户端将通过浏览器(chrome，firefox，.)连接到该服务器上，并将我们的所有接口都作为HTML+JS网页运行。

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

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

只要FPS保持在相对较低的水平，这一切都能很好地工作。当fps增加时，会发生以下两件事。

1. 无论是c++ when服务器内存占用增加得非常快，当没有更多的内存可用时，都会崩溃。经过调查，当网络使用满，websocket缓存被填满时，就会发生这种情况。我认为这是由于websocket的做事方式，因为套接字必须等待消息被发送和接收才能发送下一条消息。
2. 或者，浏览器会在一段时间后崩溃，显示自动截图屏幕(见下图)。在这种情况下，似乎会或多或少地发生同样的事情，但这次似乎是由于垃圾收集策略。下面的另一个图显示了应用程序运行时内存使用情况的Print屏，清楚地显示了saw模式。这似乎表明垃圾收集工作的时间间隔越来越远。

​

​

​

​

我已经将问题归结为非常大的消息(>100 to )正在以每秒的速度快速发送。信息越大，发生的越快。为了使用我收到的消息，我启动了一个web工作者，将我收到的blob传递给网络工作者，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);
}

网络工作者代码：

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”.

总之，对于*问题中的痛苦，一个非常简单的解决方案:-)