Memory leak in javascript when using new Image() - Stack Overflow

admin管理员组

文章数量:1287820

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;

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;

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;

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;

• javascript
• memory-leaks
• image

Share Improve this question Follow asked Sep 25, 2011 at 10:30 GrubGrub 88322 gold badges1111 silver badges2121 bronze badges 3

• possible duplicate of Javascript + IMG tags = memory leak. Is there a better way to do this? – bzlm Commented Sep 25, 2011 at 10:33
• You've asked five questions here on SO and NEVER accepted one as the best answer. Please fix that or people will start ignoring your questions. – jfriend00 Commented Sep 25, 2011 at 15:17
• Didn't realise that was how it worked. I'll do that now. – Grub Commented Sep 26, 2011 at 12:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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.

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.

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.

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;
}

本文标签： Memory leak in javascript when using new Image()Stack Overflow