How do I fix or work around this memory leak in fetch?

Question

Similar to this question: Fetch API leaks memory in Chrome

When using fetch to regularly poll data, Chrome's memory usage continually increases without ever releasing the memory, which eventually causes a crash.

https://jsfiddle.net/abfinz/ahc65y3s/13/

const state = {
    response: {},
  count: 0
}

function poll(){
    fetch('https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg')
    .then(response => {
      state.response = response;
      state.count = state.count + 1;
      if (state.count < 20){
        console.log(state.count);
                setTimeout(poll, 3000);
      } else {
        console.log("Will restart in 1 minute");
        state.count = 0;
        setTimeout(poll, 60000);
      }
    });
}

poll();

This JSFiddle demonstrates the issue fairly well. By polling for data every 3 seconds, it seems that something is causing Chrome to continually hold onto the memory. If I let it stop and wait for a few minutes, it usually will release the memory, but if polling continues, it usually holds onto it. Also, if I let it run for a few full cycles, even forcing garbage collection from the perfomance tab of the dev tools doesn't always release all of the memory.

• The memory doesn't show up in the JS Heap. I have to use the Task Manager to see it.
• Occasionally, the memory will clear while actively polling, but inevitably builds to extreme levels.
• Edge also shows the issue, but seems to be more proactive in clearing the memory. Though it still eventually builds to 1GB+ of extra memory usage.

Am I doing something wrong, or is this a bug? Any ideas on how I can get this kind of polling to work long-term without the memory leak?

Answer 1

I played around a bit with it and it seems to be a bug with the handling of the response so that it won't free the allocated memory if you are not calling any of the response functions.

The chrome task manager and the windows task manager report the same size of 30 MB constantly if i start the code snippet here using this order of execution. Meanwhile it runs on jsfiddle too with 30 MB on request #120.

const state = {
    response: {},
    count: 0
  },
  uri = 'https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg';

!function poll() {
  const controller = new AbortController(),
    signal = controller.signal;
  // using this you can cancel it and destroy it completly.
  fetch(uri, { signal })
    // this is triggered as soon as the header data is transfered
    .then(response => {
      /**
       * Continung without doing anything on response
       * fills the memory.
       *
       * Chrome downloads the file in the background and 
       * seems to wait for the use of a call on the
       * response.fx() or an abort signal.
       * 
       * This seems to be a bug or a small design mistake
       * if response is never used.
       *
       * If response.json(), .blob(), .body() or .text() is
       * called the memory will be free'd.
       */
      return response.blob();
    }).then((binary) => {
      // store data to a var
      return state.response = binary;
    }).catch((err) => {
      console.error(err);
    }).finally(() => {
      // and start the next poll
      console.log(++state.count, state.response.type, (state.response.size / 1024 / 1024).toFixed(2)+' MB');
      requestAnimationFrame(poll);
      // console.dir(state.response);
      
      // reduces memory a bit more
      controller.abort();
    })
}()