javascript - 使用文件阅读器 readAsArrayBuffer 时如何释放 Array Buffer 内存？

Question

我在使用 FileReader readAsArrayBuffer 时遇到问题

使用 Chrome 我运行了这个jsfiddle 示例

1. 步骤1。我选择打开一个大文件（~1.5 GB）文件读取正常：
   • Html 文本从Before readAsArrayBuffer变为After readAsArrayBuffer
   • 打印到控制台显示大小为 ~1.5 GB 的数组缓冲区 (ArrayBuffer(1482268150))
2. 第2步。我选择另一个文件（~300 MB）并且文件读取正常：
   • Html 文本从Before readAsArrayBuffer变为After readAsArrayBuffer
   • 打印到控制台显示大小为 ~300 MB 的数组缓冲区 (ArrayBuffer(1482268150))

当我重复第 1 步和第 2 步时，Chrome 的“任务管理器”中的每次调用都会增加内存占用量最终，我看到一条 OUT_OF_MEMORY 错误消息，显示的 HTML 文本停止更改，并且不再向控制台打印输出（见附表)

根据这里

Memory 列代表本机内存。DOM 节点存储在本机内存中。如果此值增加，则正在创建 DOM 节点。

就我而言，我没有添加任何 DOM 元素，所以我不理解Memory的这个定义。

我寻找释放内存的方法，但是在我读到浏览器通过垃圾收集处理这个问题的任何地方。由于读取发生在本地函数内部，并且数组缓冲区被分配给本地变量，我希望 GC 启动并释放内存，但这不会发生。

[![FileReader readAsArrayBuffer 后应该如何释放内存？]

谢谢

---

ps 我看到了这个链接。就我而言，它发生在 Chrome 79 上的 Ubuntu 18.04 上

jsfiddle代码

<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;
}

标签： javascriptfilereader