javascript - Chrome 中的 FileReader 内存泄漏

Question

我有一个具有文件上传功能的网页。上传以 5MB block 的形式执行。我想在将每个 block 发送到服务器之前计算每个 block 的哈希值。这些 block 由 Blob 表示对象。为了计算哈希值，我将这样的 blob 读入 ArrayBuffer。使用 native FileReader .这是代码:

var reader = new FileReader();

var getHash = function (blob, callback) {
    reader.onloadend = function (e) {
        var hash = util.hash(e.target.result);
        callback(hash);
    };
    reader.readAsArrayBuffer(blob);
}

var processChunk = function (chunk) {
    if (chunk) {
        getHash(chunk, function (hash) {
            util.sendToServer(chunk, hash, function() {
                // this callback is called when chunk upload is finished
                processChunk(chunks.shift());
            });
        });
    }
}

var chunks = file.splitIntoChunks(); // gets an array of blobs
processChunk(chunks.shift());

问题:使用 FileReader.readAsArrayBuffer 似乎会占用大量未释放的内存。到目前为止，我在以下浏览器上测试了一个 5GB 的文件:

• Chrome 55.0.2883.87 m(64 位):内存快速增加到 1-2GB 并围绕此波动。有时它会一直上升并且浏览器选项卡崩溃。它可以使用比读取 block 的大小更多的内存。例如。在读取 500MB 的 block 后，该进程已经使用了 700MB 的内存。

• Firefox 50.1.0:内存使用量在 300-600MB 左右波动

我尝试过的代码调整 - 都无济于事:

• 对所有 block 重新使用相同的 FileReader 实例(如 this question 中所建议)
• 为每个 block 创建新的 FileReader
• 在开始新 block 之前添加超时
• 在每次读取后将 FileReader 和 ArrayBuffer 设置为 null

问题:有没有办法解决这个问题？这是 FileReader 实现中的错误还是我做错了什么？

编辑:这是一个 JSFiddle https://jsfiddle.net/andy250/pjt9udeu/

Answer 1

这是 Windows 上的 Chrome 中的一个错误。这里报道:https://bugs.chromium.org/p/chromium/issues/detail?id=674903