为什么这段代码会消耗内存并且没有被完全回收？

Question

我有一个简单的 JavaScript 代码，它在无限运行时会消耗内存。内存消耗由 Google Chrome 内部内存分析器监控。

  setInterval(function(){
     var xhr = new XMLHttpRequest();
     xhr.open('GET', 'json.txt', true);
     xhr.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
           console.log(this.responseText);
        }
     };
     xhr.send('');
  }, 500);

带有上述代码示例的 HTML 文件和 json.txt 托管在我的本地服务器上，获取文件的时间不超过 500 毫秒（通常约为 7-10 毫秒）。

长时间运行内存图是这样的

编辑工作一小时后的同一个 Chrome 窗口

编辑 从长远来看（小时），并非所有内存都被回收，图表仍在上升。 我了解为什么内存被消耗，我不明白为什么它没有完全回收。

编辑 这就是我可以减少内存泄漏的方法

  var callback = function(){
      if(this.readyState == 4 && this.status == 200) {
          console.log(this.responseText);
      }
  } 

  setInterval(function(){
     var xhr = new XMLHttpRequest();
     xhr.open('GET', 'json.txt', true);
     xhr.onreadystatechange = callback;
     xhr.send('');
  }, 500);

这项改进允许不将回调的闭包链接到xhr var。

Answer 1

对于一个你反复加载json.txt 的内容，这将需要一些内存。除此之外，XHR 本身可能还需要一些内存。不过，我认为这不是什么大问题，因为无论如何内存似乎都被回收了。

Answer 2

我想这个间隔并不是在真空中设定的。你传递给 setInterval 的函数可以访问它定义的词法范围。这意味着它周围的每个变量在垃圾收集器的眼中总是可以访问的，即使你没有在函数中使用这些变量。垃圾收集器永远不会清理它。在更卫生的环境中定义函数可能会更好，因为它不会对任何大型变量进行闭包访问。

编辑：抱歉，我会尽量让自己更清楚。这与 XHR 无关——你可以在 setInterval 函数中放置任何东西（甚至什么都没有），如果在它的词法范围内有一些你想要清理的变量，它仍然会泄漏。您只需要确保 setInterval 函数没有对您要清理的任何变量的闭包访问权限。例如：

(function() {
  var a = readFile('a-very-big-file.txt');

  setInterval(function() {
    console.log('im leaking!');
  }, 500);
})();

那会泄漏。即使 setInterval 没有做任何特别有意义的事情，它仍然可以访问“a”，并且垃圾收集器认为它是可访问的。

Answer 3

为什么不应该呢？至少 var xhr = new XMLHttpRequest(); 必须在每次迭代时消耗内存并由 GC 收集（可能在您的图表上可以看到）。

Answer 4

如果请求-响应周期比指定的时间间隔长，肯定会有一些内存开销。

因为只有在请求完成（成功或错误）后才会释放内存。

Answer 5

内存没有被完全回收很可能是由于使用了 console.log。我假设在后台，控制台会将内容添加到内部数组，或者可能是一个字符串，并且由于您正在向其中添加大块数据，并且永远不会从中删除，GC 永远不会清理它，而应用程序是跑步。尝试注释掉该语句，看看它是否会改变内存使用情况。用于创建 XMLHttpRequest 的内存最终会被 GC 释放，因为在请求完成后对它的引用将成为孤立的，但 console 是一个全局变量，当页面可用时它仍然保留在范围内。