使用新的Image（）时javascript中的内存泄漏 [英] Memory leak in javascript when using new Image()

问题描述

我似乎有一个内存泄漏，因为在javascript脚本中使用'new Image（）'。如果我在Windows资源监视器中观察使用过的物理内存，我会在加载页面时获得预期的内存增加，因为它使用如下方式加载一些非常大的图像：

I seem to have a memory leak, caused by using the 'new Image()' in a javascript script. If I watch the used physical memory in the windows resource monitor, i get the expected increase in memory used when I load the page because it loads some quite large images using as follows:

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'声明的：

I would have though that when the page is navigated away from this would automatically destroy the references and free up the memory, but this doesn't seem to be the case. Instead, i navigate away and then go back to the page only the find the memory ramp up even more as it loads the images again without ever freeing up the previously allocated memory. I have tried manually removing references by putting code in the unload event to do this but it doesn't seem to make any difference. The variables were all initially declared with '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
});

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

does anyone have any pointers as to where I'm going wrong here? I thought the problem might be to do with circular references as i have built a list class where each item contains a reference to the previous and next image, but i have deeted these as follows:

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

推荐答案

首先关闭，那里当你转到另一个页面时，我知道没有浏览器只是因为你有一个存储在JS数组中的图像。

First off, there is no browser that I know of that leaks when you go to another page just because you have images stored in a JS array.

如果你有一些旧的浏览器泄漏在DOM< ==> JS之间有循环引用，其中一些javascript引用DOM元素，而DOM元素上的自定义属性引用回同一个javacript对象，但这看起来不像你在这里。

There are some older browsers that leak if you have circular references between DOM <==> JS where some javascript refers to a DOM element and a custom attribute on the DOM element refers back to the same javacript object, but that does not appear to be what you have here.

所以...如果你看到的是从一个页面到另一个页面的泄漏，我会感到惊讶。如果您确信它是，那么创建一个可以与我们共享的普通网页或一个显示问题的jsFiddle，并告诉我们您正在测试的确切浏览器以及您测量内存使用情况的具体方式确定你有泄漏。

So ... I'd be surprised if what you're seeing is actually a leak in going from one page to the next. If you're convinced it is, then create either a plain web page that you can share with us or a jsFiddle that shows the issue and tell us what exact browser you're testing in and exactly how you're measuring the memory usage that determines you have a leak.

为了让它真正成为一个泄密点，每次你一遍又一遍地访问页面时，你必须始终看到内存使用量上升和上升。只是因为第二次进入页面时总内存使用率略高，并不意味着您有泄漏。浏览器有一些数据结构增长（到某一点）使用，如基于内存的缓存，会话浏览历史记录等...不表示泄漏。

For it to truly be a leak, you have to consistently see memory usage go up and and up and up, every time you go to the page over and over again. Just because total memory usage is a little bit higher the second time you go to the page does not mean you have a leak. The browser has some data structures that grow (to a point) with usage like the memory-based cache, the session browsing history, etc... that are not indicative of leaks.

第二次关闭，我在您显示的数据结构中没有看到任何已知会导致旧浏览器泄漏的循环引用的类型。

Second off, I don't see anything in the data structures you've shown that are illustrative of the kinds of circular references that are known to cause leaks in older browsers.

第三次关闭， delete 运算符用于从对象中删除属性。这就是它的全部。请参阅以下文章：了解删除和 MDN删除以获得更多解释。因此，卸载处理程序中的清理代码未正确使用 delete 。您无法使用 delete 删除变量或数组元素。虽然我看不出有什么理由为什么这个代码是必要的，如果你打算拥有它，它将是这样的：

Third off, the delete operator is for removing properties from an object. That's all it's for. See these articles: Understanding Delete and MDN Delete for a lot more explanation. So, your cleanup code in the unload handler is not using delete properly. You cannot delete vars or array elements with delete. Though I can't see any reason why this code is necessary, if you were going to have it, it would be like this:

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

这篇关于使用新的Image（）时javascript中的内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！