Memory usage with xhr blob responseType (Chrome)

Question

Using Google Chrome, suppose I download a file as a blob using ajax as follows:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'some/path', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {      
    //Save xhr.response using FileSystem API
};

xhr.send();

Do I need to worry about memory use here (assuming the file downloaded might be very large, or I might download lots of files in this way)?

My understanding is that since I'm specifying a responseType of 'blob' rather than 'arraybuffer', the downloaded data won't get loaded into the memory available to Javascript. However, the downloaded data must be stored somewhere. Is it just getting stored in memory, or will the browser put it in some kind of out-of-memory cache if necessary? If it is getting held in memory, is there any way for me to dispose of it once I'm done with it (i.e., in my example, once I've saved it using the FileSystem API).

Answer 1

For binary or blob data, Chrome uses a complex system consisting of a memory buffer for the tab and an asynchronous global storage logic, which also swaps data to disk. There are limits on the tab memory, the global storage capacity, and importantly the speed at which data can be transferred between the two and swapped out.

This is not the same as the available JavaScript memory, which holds your code and regular variables.

There is no way of knowing exactly what those limits are, but the speed at which you create blobs plays a crucial role. Slowing down such operations to, say the speed of a slow disk, can greatly increase the memory available to your application.

An explanation of Chrome's Blob storage can be found here: https://chromium.googlesource.com/chromium/src/+/master/storage/browser/blob/README.md

To answer your question: Yes, you need to worry about memory there. If the data you're loading in your XHR request in one go is larger than the available tab memory, the tab will crash. Likewise, if you exceed the global storage allowance over time or load many smaller files too fast, you're also going to run into problems.

Answer 2

I can't answer your specific question about where the data gets stored, but I would imagine it goes to memory on disk.

The part I can answer though, is how to free up the memory used by the blob object itself (not necessarily the data, just the blob object). As long as you are not using the object in your current scope or the scope has ended it will automatically be cleaned up. For example, inside a closure or anonymous function, when the function ends, anything that was created in that scope will be garbage collected. You can also manually assign it to null or call delete.

You should read about the delete operator from MDN. There is also a memory management page on MDN that explains the process above in much greater detail.