Fetch API leaks memory in Chrome

Question

When using the fetch-API in the most simple way, Chrome is not garbage collecting correctly. Am I doing something wrong?

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/

This JSFiddle fills the memory with 1.4GB, which doesn't release until you either manually garbage collect or you close the tab. If you increase the number of iterations to 1000 it "downloads" 14GB (from the own disk) and instead of garbage collecting it starts filling the swap file on disk.

Am I doing something wrong or is this a bug in Chrome? When testing with Safari, it also fills the hard drive with 1.4GB, but starts garbage collecting as soon as it's done.

PS. You can't use the memory profiler, since that tells you that you only use a few MB of data, even if the Activity Monitor or Chromes own Task Manager says 1.4GB.

Answer 1

You're doing nothing wrong, as that is the correct way to call fetch:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

It's not a bug in Chrome either. It behaves as expected: For each fetch it creates an object that will update during all the promise completion process. All http headers (sent, received), the actual image data, you name it. You're calling it 100 times, so its 14 Mb per promise. Eventually the promises will complete and the garbage collector will free the memory used. I've checked the fiddle and it takes some time for this to happen (minutes), but eventually the memory will be released.

Maybe if you explain why and how you need to launch 100 http calls at the same time, there can be a way to do it so the browser doesn't reserve 1.4 GB of RAM. "Promise.all" or "Promise.race" may be more efficient with the memory use.

Answer 2

You're doing nothing wrong; it's just that when you call a bunch of promises at the same time, that's going to use a lot of memory. If you want to make sure that it doesn't use as much memory--and you're willing to have it take longer--you could put this all inside of an async function and do this:

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