Chrome中的FileReader内存泄漏 [英] FileReader memory leak in Chrome

问题描述

我有一个具有文件上传功能的网页.上载大小为5MB.我想在将每个块发送到服务器之前计算每个块的哈希值.这些块由 Blob 对象表示.为了计算哈希，我正在将这样的blob读入 ArrayBuffer使用本机 FileReader .这是代码:

I have a webpage with file upload functionality. The upload is performed in 5MB chunks. I want to calculate hash for each chunk before sending it to the server. The chunks are represented by Blob objects. In order to calculate the hash I am reading such blob into an ArrayBuffer using a native FileReader. Here is the code:

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的文件:

The problem: using the FileReader.readAsArrayBuffer seems to eat up a lot of memory which is not released. So far I tested with a 5GB file on following browsers:

• Chrome 55.0.2883.87 m(64位):内存快速上升至1-2GB，并在此附近振荡.有时会一直上升，浏览器选项卡崩溃.它可以使用的内存多于读取块的大小.例如.读取500MB的块后，该进程已经使用了700MB的内存.

• Chrome 55.0.2883.87 m (64-bit): the memory goes up to 1-2GB quickly and oscillates around that. Sometimes it goes all the way up and browser tab crashes. It can use more memory than the size of read chunks. E.g. after reading 500MB of chunks the process already uses 700MB of memory.

Firefox 50.1.0:内存使用量在300-600MB之间波动

Firefox 50.1.0: memory usage oscillates around 300-600MB

我尝试过的代码调整-全部无效:

Code adjustments I have tried - all to no avail:

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

• re-using the same FileReader instance for all chunks (as suggested in this question)
• creating new FileReader for each chunk
• adding timeout before starting new chunk
• setting the FileReader and the ArrayBuffer to null after each read

问题:是否有解决此问题的方法?这是FileReader实现中的错误，还是我做错了什么?

The question: is there a way to fix the problem? Is this a bug in the FileReader implementations or am I doing something wrong?

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

EDIT: Here is a JSFiddle https://jsfiddle.net/andy250/pjt9udeu/

推荐答案

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

This is a bug in Chrome on Windows. It is reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=674903

这篇关于Chrome中的FileReader内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！