Javascript + IMG tags = memory leak. Is there a better way to do this?

Question

I've got a web page that's using jquery to receive some product information as people are looking at things and then displays the last product images that were seen. This is in a jquery AJAX callback that looks pretty much like this:

if(number_of_things_seen > 10) {
  $('#shots li:last-child').remove();
}

$('<li><img src="' + p.ProductImageSmall + '"></li>').prependTo('#shots');

However, it seems to leak quite a bit of memory. Visually, it does the right thing, but the footprint grows indefinitely.

Safari's DOM inspector shows the DOM is how I would expect it to be, but it seems to maintain references to every image that it has displayed (as seen in this screenshot in case anyone is interested).

I've added

$('#shots li:last-child img').remove();

to the removal statement to no noticable effect.

Is there some magic necessary to let the browser release some of this stuff?

Answer 1

Can you try changing the src of the last-child and see if that makes a difference? You can then move that element to be the first child

//not tested

var $list=$('#shots>li');
$list.filter(':last-child').children('img')
.attr('src', p.ProductImageSmall)
.parent()
.insertBefore( $list.eq(0) );

Answer 2

how long have you observed this 'growing indefinitely' ? some implementations of garbage collectors don't necessarily give memory back to the OS so quickly if at all. can you distill what you are trying to do into a real simple test (eg, setting src of image over and over) w/o ajax or callbacks ? have you / can you try this w/ the other browsers ?

Answer 3

From the Mozilla Developer Center on removeChild():

The removed child node still exists in memory, but is no longer part of the DOM. You may reuse the removed node later in your code, via the oldChild object reference.

This is the key - reuse the removed child, instead of repeatedly making a new one.

// I'm sure there is a nicer way to do it in jQuery
if(number_of_things_seen > 10) {
  var shots = document.getElementById("shots");
  var li    = shots.getElementsByTagName("LI");
  var move  = shots.removeChild(li[li.length-1]);
  move.getElementsByTagName("IMG")[0].src = p.ProductImageSmall;
  shots.insertBefore(move, li[0]);
}

Answer 4

ok I have built a test harness for this, it randomly grabs a new image and uses my replace src code

see http://pastebin.me/4936458820c43

Answer 5

Dustin, It seems the insertBefore statement in my code was causing some issues. If you see this futher test case the memory usage stays pretty static even though I am emptying the last-child and inserting a new new dom fragment. Performs better than the last attempt.

http://pastebin.me/4936519fea2cf

Answer 6

Is the footprint really a problem?

I suspect that Safari caches all images as long as you stay on the same site and there's nothing you can do about it. If you're lucky Safari releases not-needed objects after some limit is reached.

The reason for this behaviour is, that Safari thinks it's likely that those images are used a second time, and therefore it caches them.

Answer 7

Browsers are notorious for memory leaks. It sounds like the problem occurs when the page is left running for a long time. How about refreshing the page before it runs out of memory?

window.setTimeout("location.reload()",1000*60*60);//refresh in an hour