javascript - 使用新的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并告诉我们您正在测试的是哪种确切的浏览器，以及如何测量所使用的内存使用率确定您有泄漏。

为了使其真正成为泄漏，每次访问该页面时，您都必须始终如一地看到内存使用率在不断上升。仅仅因为第二次访问该页面时的总内存使用量高一点并不意味着您有泄漏。浏览器的某些数据结构会随着使用量的增长(到某种程度)，例如基于内存的缓存， session 浏览历史记录等，这些数据结构并不表示泄漏。

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

第三次，delete运算符用于从对象中删除属性。这就是全部。有关更多说明，请参见以下文章:Understanding Delete和MDN Delete。因此，卸载处理程序中的清除代码未正确使用delete。您不能使用delete删除vars或数组元素。尽管我看不到为什么需要这段代码的任何原因，但是如果您要使用它，它将是这样的:

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