javascript - Fetch API 在 Chrome 中泄漏内存

Question

以最简单的方式使用 fetch-API 时，Chrome 无法正确收集垃圾。难道我做错了什么？

for (i = 0; i < 100; i++) {
  fetch('https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg')
    .then(response => {
      console.log('Memory-bloating')
    })
}

https://jsfiddle.net/dozrpcvj/12/

这个 JSFiddle 用 1.4GB 填充内存，直到您手动进行垃圾收集或关闭选项卡后才会释放。如果将迭代次数增加到 1000 次，它会“下载”14GB(从自己的磁盘)，而不是垃圾收集，而是开始填充磁盘上的交换文件。

我做错了什么还是这是 Chrome 中的错误？使用 Safari 进行测试时，它也会用 1.4GB 填充硬盘驱动器，但一旦完成就会开始垃圾收集。

PS。您不能使用内存分析器，因为它告诉您只使用几 MB 的数据，即使事件监视器或 Chrome 自己的任务管理器显示 1.4GB。

Answer 1

您没有做错任何事情，因为这是调用 fetch 的正确方法:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
这也不是 Chrome 中的错误。它的行为符合预期:
对于每次 fetch，它都会创建一个对象，该对象将在所有 Promise 完成过程中更新。所有 http header (已发送、已接收)，实际的图像数据，随叫随到。您调用它 100 次，因此每个 promise 14 Mb。最终，promise 将完成，垃圾收集器将释放使用的内存。我检查了 fiddle ，这需要一些时间(几分钟)，但最终内存将被释放。
也许如果您解释为什么以及如何需要同时启动 100 个 http 调用，可能有一种方法可以做到这一点，这样浏览器就不会保留 1.4 GB 的 RAM。 “Promise.all”或“Promise.race”在内存使用方面可能更有效。