XMLHttp POST 请求导致大量内存泄漏

Question

如何避免 XHR POST 内存泄漏？我浏览了很多关于 XHR 内存泄漏的网页，但没有好的解决方案。我的问题几乎与this 类似，该博客解释了问题但没有解决方案。

我的问题： 我有一个网络应用程序，它不断向服务器发送日期（2Mb 到 80Mb），它会发出 10 到 300 个请求。这是 POST 请求。对于 GET 请求，这样的问题不大。

我该如何解决这个问题？ 循环参考，范围，更接近等我尝试但没有成功。 我尝试使用 delete 关键字进行就绪状态更改，删除以前的 xhr 对象，尝试重用 xhr，xhr 对 null 的引用，更改编码模式等

这是示例代码。这是我需要的功能

 var base_string =  "ABCDEFGHIJKLMNOPQUST01234567890!@#$%^&:ABCDEFGHIJKLMNOPQUST01234567890!@#$%^&ABCDEFGHIJKLMNOPQUST01234567890!@#$%^&";
            base_string += base_string;  
            base_string += base_string; 
            base_string += base_string; 
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string; 
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string; 
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            this.sampleData = base_string;
            var dataToSend = this.sampleData.substring( 0, 2000000 );



           this.xhr = [];
           this.xhr[0] = new XMLHttpRequest();
           function sendRequest (){
               var Self = this;
               Self.xhr[0].onload = function (test) {
                   sendRequest ();
               };

               Self.xhr[0].open("POST", "http://localhost/upload.php" + "?n=" +  Math.random(), true);
               Self.xhr[0].send(dataToSend);
           }
           sendRequest ();

我怎样才能在没有内存泄漏的情况下做到这一点？

Answer 1

清理你的代码 - 这应该做同样的事情，而不需要奇怪和毫无意义地使用 Self 和数组......它还会重新初始化 xhr

我已更改为上传加载事件添加一个侦听器 - 这里的快速测试似乎没有泄漏（似乎）

// snip
this.sampleData = base_string;
var dataToSend = this.sampleData.substring( 0, 2000000 );

function sendRequest (){
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('load', function (e) {
        sendRequest ();
    });

    xhr.open("POST", "http://localhost/upload.php" + "?n=" +  Math.random(), true);
    xhr.send(dataToSend);
}
sendRequest ();

Answer 2

连续 + 请求的大小 + 请求的数量。我认为你不应该在这种情况下使用 XHR。也许是 WebRTC、长轮询或 Web 套接字。即使您找到一种解决方法来以这种方式执行它，这也不会扩展。

Answer 3

对于您发送的每个请求，您都会添加一个新的 onload 处理程序。

Self.xhr[0].onload = function (test) {
    sendRequest ();
};

此时旧的处理程序不会被删除并保留在内存中。垃圾收集器将无法释放内存。

在您的情况下，您只需要一个事件监听器，所以我建议像这样将监听器的附件移出 sendRequest 函数，并且内存泄漏应该消失了。

this.xhr = [];
this.xhr[0] = new XMLHttpRequest();
xhr[0].onload = function (test) {
    sendRequest ();
};
function sendRequest (){
    xhr[0].open("POST", "http://localhost/upload.php" + "?n=" +  Math.random(), true);
    xhr[0].send(dataToSend);
}
sendRequest (); 

编辑：版本 2

我尝试了另一个版本，它产生了更好的结果。在我的设置中，内存从未超过 2.6G。它是 Jaromandas 作品的衍生作品。 基本上是他的版本加上removeEventHandler和delete

function sendRequest (){
function run(e){
  xhr.upload.removeEventListener('load',run)
  sendRequest()
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('load', run);
xhr.open("POST", "http://localhost:2345/" + "?n=" +  Math.random(), true);
xhr.send(dataToSend);
delete xhr
}
sendRequest ();

Answer 4

尝试更新的现代方法，使用 fetch...？

let url = '/upload.php'
let myInit = {
    method: 'post',
    cache: 'no-store',
    body: new ArrayBuffer(2000000)
}

function sendRequest() {
    return fetch(url, myInit)
        .then(res => res.blob())
        .then(sendRequest)
}

sendRequest()