How to release Array Buffer memory when using File Reader readAsArrayBuffer?

Question

I'm having problems to use FileReader readAsArrayBuffer

Using Chrome I ran this jsfiddle example

1. step1. I select to open a big file (~1.5 GB) The file is read ok:
   • the Html text changes from Before readAsArrayBuffer to After readAsArrayBuffer
   • the print to the console shows an array buffer of size ~1.5 GB (ArrayBuffer(1482268150))
2. step2. I select another file (~300 MB) and the file is read ok:
   • the Html text changes from Before readAsArrayBuffer to After readAsArrayBuffer
   • the print to the console shows an array buffer of size ~300 MB (ArrayBuffer(1482268150))

As I repeat steps 1 and 2, the Memory footprint increases on every call in Chrome's "Task Manager" Eventually, I see an OUT_OF_MEMORY error message, the displayed HTML text stops changing, and no more print-outs to the console (see attached table)

According to here

The Memory column represents native memory. DOM nodes are stored in native memory. If this value is increasing, DOM nodes are getting created.

In my case, I don't add any DOM elements, so I don't understand this definition of Memory.

I looked for ways to free the memory, but everywhere I read that the browser takes care of this via Garbage Collection. Since the read happens inside a local function, and the array buffer is assigned to a local variable, I expect GC to kick in and free memory, but this does not happen.

[![How should I release the memory after FileReader readAsArrayBuffer?]

Thanks

---

p.s. I saw this link. In my case it happens on Ubuntu 18.04 on Chrome 79

jsfiddle code

<form>
<input id="input" type="file"></input>
</form>
<pre id="output"></pre>

var input = $('#input');
var output = $('#output');

function readFile(f) {
    var reader = new FileReader();
    reader.readAsText(f);
    reader.onload = function() {
        var text = reader.result;
        output.html("");
        output.html(text);
    };
    reader.onerror = function(e) {
        console.log("Error:", e);
    };
}

function readFile2(f) {
    let reader = new FileReader();
      output.html("Before readAsArrayBuffer");
    try{
        reader.readAsArrayBuffer(f);
        reader.onload = function(fileLoadedEvent) {
            let arrayBuffer = fileLoadedEvent.target.result;
            console.log('arrayBuffer: ', arrayBuffer);

            // output.html("");
            output.html("After readAsArrayBuffer");
        };
    }
    catch(e)
    {
        output.html("Error reading");
    }
}


input.bind("change", function(e) {
    var file = e.currentTarget.files[0];
    readFile2(file);
});


pre {
    width: 400px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: wrap;
}