I am using jquery in my web page. I see a lot of memory leak happening and after a while the whole browser grinds to a halt. I used the sieve tool and noticed that there is a contsant increase in the no. of DOM elements, everytime by a no. of 4.
Am I doing something wrong in the way I have associated events? Or is it because I am using setTimeout to redraw my app every X seconds?
Event association:
$('.bir_Names').click(showNames); The selector $('.bir_Names') evelautes to a set of some 300 elements each of which call the function on click.
setTimeout Every X mins I remove every single HTML element in the app and rebind fresh data and associate the events. I use jquery remove() to delete elements. have tried innerHTML = '' and empty() also.
I see a jump of nearly 30-40 MB for every redraw and Sieve indicates that none of the deleted nodes are actually removed.
Anyhelp would be greatly appreciated. This thing is driving me nuts.
Thanks.
You don't mention which browser, but some googling seems to indicate that this is a known problem with IE. Here's one potential workaround:
http://forum.jquery.com/topic/possible-memory-leak-in-remove-and-empty
Note that that's referring to a 1.2.x release of jQuery. Before you do anything, make sure you are running the latest 1.6.x release to first see if the defect has already been fixed within jQuery.
[EDIT] ack...you DO state your browsers...'all'...so maybe disregard that first link.