带有 XMLHttpRequest 和 setInterval 的内存泄漏答案

【问题标题】：Memory Leak with an XMLHttpRequest and setInterval带有 XMLHttpRequest 和 setInterval 的内存泄漏
【发布时间】：2012-04-06 01:26:34
【问题描述】：

这是我在 Google Chrome 19.0.1061.1 (Official Build 125213) dev 上运行的一些代码：

<html>
<title>Memory Leak</title>
<script type="text/javascript">
    (function(){
        this.window.setInterval(function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '', false);
            xhr.send();
        }, 50);
    }).call(this);
</script>
</html>

当我在 chrome://tasks 中检查内存使用情况时，我可以看到“私有内存”无限增长（8GB RAM 配置）。如果我将上面的代码示例更改为：

<html>
<title>Memory Leak</title>
<script type="text/javascript">
    (function(){
        var xhr = new XMLHttpRequest();
        var timeout = this.window.setInterval(function() {
            xhr.open('GET', '', false);
            xhr.send();
        }, 50);
    }).call(this);
</script>
</html>

现在好了。

我不明白。 为什么保持对 setInterval 函数的引用会有所帮助，为什么只定义一个 xhr 会有所帮助，因为之前的声明是在闭包中？是否仅与 v8 相关？

感谢您对此的见解。

【问题讨论】：

保留对超时的引用无助于清理泄漏。它正在重用 XHR 对象以防止其泄漏。注意：如果您尝试从服务器读取响应，这将中断，因为它将在 50 毫秒内被覆盖。
-为什么在作用域函数上使用调用？ (function(context){console.log(context)/*window*/})(this); (function(context){console.log(context)/*window*/})(window); (function(){console.log(this)/*window*/})();

标签： javascript google-chrome xmlhttprequest setinterval v8

【解决方案1】：

在第一个中，您将在每次调用迭代器函数时实例化一个新的 XMLHttpRequest 对象。至少在 HTTP 请求完成之前，请求对象将一直存在。每秒发起 200 个 HTTP 请求会严重阻塞浏览器，因为它实际上不会执行所有请求；打开的并发连接数是有限制的。

【讨论】：

【解决方案2】：

这个 http 调用需要多长时间？如果这需要超过 50 毫秒（这是一个非常短的时间），那么第一种情况将创建越来越多的待处理请求，而第二种情况您正在重用相同的 XMLHttpRequest，这可能会取消之前的调用。

【讨论】：

【解决方案3】：

在您的第一个示例中，您在每个间隔调用 XMLHttpRequest() 的一个新实例。在第二个中，您实例化一个副本并在代码的整个生命周期中使用它。这就是为什么在第一个示例中内存不足的原因。

【讨论】：