Massive Memory Drain Due to XMLHttp POST Request

Question

Massive Memory Drain Due to XMLHttp POST Request

Is there a way to prevent XHR POST Memory leak in my web app? I have searched extensively for solutions but have not found any satisfactory answers. My issue is similar to the one described in this blog post that outlines the problem without offering any fixes.

My Dilemma: I am continuously sending large amounts of data (2Mb to 80Mb) to the server through POST requests, ranging from 10 to 300 requests. This problem does not occur with GET requests.

What can I do to resolve this? I have tried addressing circular references, scopes, closures, and more without success. Attempting to use the delete keyword during readystate changes, deleting previous XHR objects, reusing XHR objects, setting XHR references to null, and altering coding patterns all have not yielded positive results.

Below is a sample code illustrating the functionality I require:

 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 ();

How can I achieve this functionality without encountering memory leaks?

javascript ajax memory-leaks

Answer 1

Answer №1

Consistently monitoring the size and volume of requests can be challenging when using XHR. It may be more suitable to explore alternatives such as WebRTC, Long Polling, or Web Sockets for better scalability. Trying to find a workaround within the limitations of XHR could lead to issues with scaling in the future.

Answer 2

Consistently monitoring the size and volume of requests can be challenging when using XHR. It may be more suitable to explore alternatives such as WebRTC, Long Polling, or Web Sockets for better scalability. Trying to find a workaround within the limitations of XHR could lead to issues with scaling in the future.

Answer 3

Answer №2

Improve your code by removing the unnecessary use of Self and array, and also re-initializing xhr.

I have made a change to add a listener for the upload load event - a quick test shows that there doesn't appear to be any memory leaks (at least not at first glance).

// snippet
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 4

Improve your code by removing the unnecessary use of Self and array, and also re-initializing xhr.

I have made a change to add a listener for the upload load event - a quick test shows that there doesn't appear to be any memory leaks (at least not at first glance).

// snippet
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 5

Answer №3

With each request sent, a new onload handler is added.

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

The previous handler remains in memory and isn't removed, causing a memory leak. The garbage collector can't free up the memory.

If you only need one event listener in your case, it's best to move the listener attachment outside the sendRequest function. By doing this, the memory leak issue should be resolved.

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 ();

UPDATE: Version 2

I've tested another version that shows even better results. My setup never exceeds 2.6G of memory usage. It's based on Jaromandas' work with the addition of removeEventHandler and 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 6

With each request sent, a new onload handler is added.

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

The previous handler remains in memory and isn't removed, causing a memory leak. The garbage collector can't free up the memory.

If you only need one event listener in your case, it's best to move the listener attachment outside the sendRequest function. By doing this, the memory leak issue should be resolved.

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 ();

UPDATE: Version 2

I've tested another version that shows even better results. My setup never exceeds 2.6G of memory usage. It's based on Jaromandas' work with the addition of removeEventHandler and 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 7

Answer №4

Have you considered a more contemporary approach by using fetch...?

const endpoint = '/uploadData.php'
const options = {
    method: 'post',
    cache: 'no-cache',
    body: new ArrayBuffer(2000000)
}

function sendFetchRequest() {
    return fetch(endpoint, options)
        .then(response => response.blob())
        .then(sendFetchRequest)
}

sendFetchRequest()

Answer 8

Have you considered a more contemporary approach by using fetch...?

const endpoint = '/uploadData.php'
const options = {
    method: 'post',
    cache: 'no-cache',
    body: new ArrayBuffer(2000000)
}

function sendFetchRequest() {
    return fetch(endpoint, options)
        .then(response => response.blob())
        .then(sendFetchRequest)
}

sendFetchRequest()

Massive Memory Drain Due to XMLHttp POST Request

Answer №1

Answer №2

Answer №3

UPDATE: Version 2

Answer №4

Similar questions

What is the best way to save an integer in HTML's localStorage instead of a string?

Changing return values with Jest mocks in TypeScript

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

The list countdown for loop only appears in the initial iteration

Having trouble customizing the Material UI button in React?

The Google Books API has encountered an authentication error with status code 401

Accessing data from arrays asynchronously using JavaScript

Utilizing requirejs or grunt for concatenation and minification greatly enhances the performance of AngularJS implementations

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

What is the best approach in VueJS to implement a skeleton loader and an empty page condition for my orders page simultaneously?

Examining the dimensions of a div element in AngularJS

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

Guide to accessing URL or parameters in the directory of a NextJs 13 application

Navigate the array and divide the elements into separate values

When converting to TypeScript, the error 'express.Router() is not defined' may

What steps can I take to avoid keypress events causing issues with the browser's input functionality?

Converting a JavaScript string into an array or dictionary

Tips for resolving NPM high severity vulnerabilities related to pollution issues

Error: Unable to execute setState in React Native

Still Facing the 'appendChild' Error Even After Defining it