gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 22:47:33 27 4
gpt4 key购买 nike

我最近在工作中遇到了 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. 或者浏览器在一段时间后崩溃,显示“哦快照”屏幕(见下图)。在这种情况下,似乎或多或少会发生同样的事情,但这一次似乎是由于垃圾收集策略所致。下图显示了应用程序运行时内存使用情况的打印屏幕,清楚地显示了锯齿状图案。这似乎表明垃圾收集正在以越来越远的间隔进行工作。

Aw Snap screen

Saw memory pattern

我已将问题归结为每秒快速发送非常大的消息(>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 数据读取为数组缓冲区?

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

最佳答案

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

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

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

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

关于javascript - Websockets blob 解码的性能导致内存问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45866514/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com