javascript - Fetch API leaks memory in Chrome - Stack Overflow

admin管理员组

文章数量:1324843

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('.jpg')
    .then(response => {
      console.log('Memory-bloating')
    })
}

/

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.

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/wikipedia/mons/3/3d/LARGE_elevation.jpg')
    .then(response => {
      console.log('Memory-bloating')
    })
}

https://jsfiddle/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.

• javascript
• google-chrome
• memory-leaks
• fetch-api

Share Improve this question Follow edited Mar 15, 2022 at 9:34 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Oct 8, 2018 at 6:28 user2687506user2687506 80088 silver badges2222 bronze badges 17

• 2 Interesting note - I can't seem to find that memory in the dev tools. Taking a memory snapshot reports ~10 meg, looking at the performance tab, it doesn't report abnormal memory usage - from ~8 meg to ~16 at most, during load. Task manager does show more than 1.5 gig of memory used and I have a single Chrome tab open. Hitting record on the performance tab and then following up with garbage collection frees up about a meg of JS heap memory (11MB -> 10MB) but task manager reports at least a gig of memory released. – VLAZ Commented Oct 8, 2018 at 6:46
• @vlaz Yes, that is what I've noted too. I've reported it to Google through Chrome, but I wanted to know if I were the one using fetch the wrong way, or Chrome handling fetch the wrong way. – user2687506 Commented Oct 8, 2018 at 6:58
• For what it's worth, I get similar results in Firefox. Sometimes. The JSFiddle blows up my memory usage from 1.2GB to ~3.3GB but then it cleans up. However, executing the same code in the console hits around 2.7GB and lingers there for a while more before it cleans up after itself. It appears as if the GC sometimes kicks in later. I seem to have a similar result with Chrome on occasions: open new tab -> run the code in the console. The first time I do it, it reaches ~1.6GB and then goes back to ~250MB. The second time I do it in the same tab (no reloading), the memory stays high. – VLAZ Commented Oct 8, 2018 at 7:09
• 1 I've tried many things including setting null to variables, resizing arrays and triggering GC manually. In the end, I've settled with refreshing the page. That immediately brings down the memory usage, but introduces a lag until I can execute more javascript in the browser. – nurettin Commented Nov 27, 2018 at 14:34
• 1 Chrome is doing everything as it should and you are doing nothing wrong. The allocation of the memory is by design. Chrome automatical collects garbarge in intervals and the memory will be free'd again. Either by you (if you press the recycle bin inside inspector) or automatically in ("unknown") intervals. If you would store every response-reference in (for example) window["fetch-n"], the memory allocation would remain after garbarge collection. – Christopher Commented May 14, 2021 at 0:30

 |  Show 12 more ments

3 Answers 3

Sorted by: Reset to default 1

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

https://developer.mozilla/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 pletion 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 plete 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.

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/wikipedia/mons/3/3d/LARGE_elevation.jpg')
  console.log('Memory-bloating')
}

fetch('https://upload.wikimedia/wikipedia/mons/3/3d/LARGE_elevation.jpg')
    .then(response => response.json())
    .then(data => console.log(data))

本文标签： javascriptFetch API leaks memory in ChromeStack Overflow