使用FileReader和Promise时JavaScript内存泄漏

Posted 2021-04-05

-编辑

I created a bug report to follow the issue

---

我正在尝试将目录上传到我的服务器。该文件夹包含大文件，包括CT扫描图像。它工作正常，但我有内存问题。

document.getElementById("folderInput").addEventListener('change', doThing);

function doThing(){
    var filesArray = Array.from(event.target.files);

  readmultifiles(filesArray).then(function(results){
    console.log("Result read :"+results.length);
  })
}

function readmultifiles(files) {
  const results = [];
  return files.reduce(function(p, file) {
    return p.then(function() {
      return readFile(file).then(function(data) {
        // put this result into the results array
        results.push(data);
      });
    });
  }, Promise.resolve()).then(function() {
    // make final resolved value be the results array
    console.log("Returning results");
    return results;
  });
}

function readFile(file) {

  const reader = new FileReader();

  return new Promise(function(resolve, reject) {
    reader.onload = function(e) {
      resolve(e.target.result);
    };
    reader.onerror = reader.onabort = reject;
    reader.readAsArrayBuffer(file);
  });
}

JSFiddle of the solution - 使用此question的回复

在此示例中，我对数据不执行任何操作，但您可以看到内存使用量不断增长。

上传前的内存使用量：

上传后的内存使用量：

上传的文件夹是342Mb所以它有意义，但内存应该是免费的，对吧？

如果您有任何想法可以防止这种情况，或者可能有其他API我可以使用而不是FileReader？

编辑 - - -

我认为这绝对是与Chrome和V8相关的错误。当我尝试使用Firefox时，内存被释放。它可能链接到this bug

答案

你需要做的就是删除你的FileReader对象。您可以在循环中创建它们，创建它们，使用它，创建一个使用它等。工作流程应该创建一个，使用一个，删除一个，创建一个，使用一个，删除一个，等等。

所以你把它们留在了记忆中。将它们设置为null将使它们被垃圾收集（最终）。

做

declare reader inside Promise handler. It will be garbage collected automatically then.