如何在 fetch 中修复或解决此内存泄漏？

Question

类似于这个问题： Fetch API leaks memory in Chrome

当使用 fetch 定期轮询数据时，Chrome 的内存使用量会不断增加而不会释放内存，最终导致崩溃。

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();

这个 JSFiddle 很好地展示了这个问题。通过每 3 秒轮询一次数据，似乎有什么东西导致 Chrome 不断地占用内存。如果我让它停止并等待几分钟，它通常会释放内存，但如果轮询继续，它通常会保留它。此外，如果我让它运行几个完整的周期，即使从开发工具的性能选项卡中强制进行垃圾收集也不会总是释放所有内存。

• 内存未显示在 JS 堆中。我必须使用任务管理器才能看到它。
• 有时，内存会在主动轮询时清除，但不可避免地会累积到极端水平。
• Edge 也显示了该问题，但似乎更主动地清除了内存。尽管它最终仍会增加 1GB 以上的额外内存使用量。

是我做错了什么，还是这是一个错误？关于如何让这种轮询在没有内存泄漏的情况下长期工作的任何想法？

Answer 1

我玩了一下，它似乎是响应处理的一个错误，因此如果您不调用任何响应函数，它就不会释放分配的内存。

如果我使用此执行顺序在此处启动代码 sn-p，chrome 任务管理器和 windows 任务管理器会不断报告相同的大小 30 MB。同时它也在 jsfiddle 上运行，请求 #120 有 30 MB。

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();
    })
}()