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

Methods for eliminating curly braces from HTTP response in JavaScript before displaying them on a webpage

Tap on the image to enlarge

Losing values due to custom $validator and getterSetter in AngularJS / UI Bootstrap

Vue3 - Utilizing a method to dynamically alter an input property

Manipulate a value using JavaScript

The Ubuntu virtual machine hosted on Google Cloud is experiencing difficulties connecting through Node.js using an external IP address

What could be the reason for the undefined value of my ID retrieved from the next JS router.query upon page refresh?

How can Javascript or Jquery determine the specific event assigned to an object?

Is there a way to stop Ajax calls initiated with Dajaxice?

Troubleshooting issues with submitting forms remotely in Rails

Develop a custom directive that incorporates ng-model and features its own distinct scope

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Integrate JavaScript date into the gulp-rev workflow

The Response.Redirect function is failing to execute

Is there a way to retrieve bookmarks (TOC) from a PDF document using technologies such as NodeJS, ReactJS, or PHP?

Go to a different page when a row is selected in a PrimeFaces datatable

Modify meta titles according to specific url #id

What is the best way to display changing session variables in PHP?

Encountered an Error in Express.js: Unable to POST /users

Creating a Command Line Interface (CLI) application in JavaScript for the browser: A guide to simulating blocking I/O