使用 FileReader 和 Promise 时的 JavaScript 内存泄漏

Question

-编辑

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

Answer 1

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

所以你把它们都留在了内存中。将它们设置为 null 将使它们被垃圾收集(最终)。

做

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