使用新的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操作员用于从对象中删除属性.这就是它的全部.请参阅以下文章:了解删除和MDN删除以获得更多解释.因此,卸载处理程序中的清理代码未delete正确使用.您无法删除变量或数组元素delete.虽然我看不出有什么理由为什么这个代码是必要的,如果你打算拥有它,它将是这样的:

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