使用 new Image() 时 javascript 中的内存泄漏

Question

我似乎有内存泄漏，这是由于在 javascript 脚本中使用“new Image()”引起的。如果我在 Windows 资源监视器中查看使用的物理内存，我会在加载页面时得到预期的内存使用增加，因为它使用如下方式加载了一些相当大的图像：

var imgObjs = [];

// in for loop i = 0, 1, 2...
imgObjs[i] = new Image();
imgObjs[i].onload = function(event) {
    // image loaded
}
imgObjs[this.img_src].src = this.img_src;

我会认为当页面导航离开时会自动破坏引用并释放内存，但情况似乎并非如此。取而代之的是，我离开然后返回页面，发现内存增加得更多，因为它再次加载图像而没有释放先前分配的内存。我尝试通过将代码放入 unload 事件中来手动删除引用，但它似乎没有任何区别。这些变量最初都是用'var'声明的：

// allow garbage collection by removing references
$(window).unload(function() {
    for(var i in imgObjs) {
    imgObjs[i] = null;
    delete imgObjs[i];
}
delete imgObjs

// delete other variables that reference the images
});

有没有人知道我在哪里出错了？我认为问题可能与循环引用有关，因为我已经构建了一个列表类，其中每个项目都包含对上一张和下一张图像的引用，但我将这些内容如下：

delete galleries[i].pictures.Items[j].prev;
delete galleries[i].pictures.Items[j].next;

Answer 1

首先，据我所知，没有浏览器会因为您将图像存储在 JS 数组中而在转到另一个页面时发生泄漏。

如果您在 DOM JS 之间有循环引用，一些较旧的浏览器会泄漏，其中一些 javascript 引用 DOM 元素并且 DOM 元素上的自定义属性引用回同一个 javacript 对象，但这不会看起来就是你这里的东西。

所以...如果您看到的实际上是从一页到下一页的泄漏，我会感到惊讶。如果您确信它是，然后创建一个可以与我们共享的普通网页或一个显示问题的 jsFiddle，并告诉我们您正在测试的确切浏览器以及您如何测量内存使用情况确定您有泄漏。

要让它真正成为泄漏，您必须始终看到内存使用量不断增加，并且每次您一遍又一遍地访问该页面。仅仅因为第二次访问该页面时总内存使用量略高并不意味着您有泄漏。浏览器有一些数据结构会随着使用而增长（达到一定程度），例如基于内存的缓存、会话浏览历史记录等……这些数据结构并不表示泄漏。

第二，我在您展示的数据结构中看不到任何说明已知会导致旧浏览器泄漏的循环引用类型的任何内容。

第三关闭，delete 运算符用于从对象中删除属性。这就是它的全部目的。请参阅这些文章：Understanding Delete 和 MDN Delete 以获得更多解释。因此，卸载处理程序中的清理代码没有正确使用delete。您不能使用delete 删除变量或数组元素。虽然我看不出有什么理由需要这段代码，但如果你要拥有它，它会是这样的：

// allow garbage collection by removing references
$(window).unload(function() {
    for (var i = 0; i < imgObjs.length; i++) {
        imgObjs[i] = null;
    }
    imgObjs = null;
}