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

2023-12-25

我似乎有内存泄漏,是由于在 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;

我本来希望当页面离开此页面时会自动销毁引用并释放内存,但情况似乎并非如此。相反,我导航离开,然后返回到该页面,却发现内存在再次加载图像时增加得更多,而没有释放之前分配的内存。我尝试通过将代码放入卸载事件中来手动删除引用来执行此操作,但似乎没有任何区别。变量最初都是用“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;

First关闭,据我所知,没有哪个浏览器会因为将图像存储在 JS 数组中而导致您转到另一个页面时发生泄漏。

如果您在 DOM JS 之间存在循环引用(其中某些 javascript 引用 DOM 元素,并且 DOM 元素上的自定义属性引用回同一个 javacript 对象),则某些较旧的浏览器会发生泄漏,但这似乎并非如此你这里有什么。

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

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

Second关闭,我在您显示的数据结构中没有看到任何可以说明已知会导致旧浏览器泄漏的循环引用类型的内容。

Third关闭,将delete运算符用于从对象中删除属性。这就是它的全部目的。请参阅这些文章:了解删除 http://perfectionkills.com/understanding-delete/ and MDN 删除 https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special_Operators/delete_Operator更多解释。因此,卸载处理程序中的清理代码未使用delete适当地。您不能使用以下命令删除变量或数组元素delete。虽然我不明白为什么这段代码是必要的,但如果你想要它,它会是这样的:

// allow garbage collection by removing references
$(window).unload(function() {
    for (var i = 0; i < imgObjs.length; i++) {
        imgObjs[i] = null;
    }
    imgObjs = null;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 new Image() 时 JavaScript 中的内存泄漏 的相关文章

随机推荐