I think I just fixed this leak in revision [2010] of jQuery. It had to do with the global cache of events. Please grab the latest from SVN to see if that fixes the issue.
-- Brandon Aaron On 5/31/07, Ruchi <[EMAIL PROTECTED]> wrote:
Hi, I'm a JS and JQuery newbie and I'm trying to resolve a memory leak that comes in IE for my code. Basically, I add elements to the DOM dynamically based on a list of items that I receive from a backend server. I used JQuery to create the list dynamically but noticed that the memory taken by IE keeps on increasing every time the code is executed. I read up on JS memory leaks, and while I'm still grappling to understand the issues entirely, I found the pattern below to eliminate memory leaks. <!-- Pattern to JS avoid memory leaks from http://www.codeproject.com/jscript/leakpatterns.asp--> [Exhibit 11 - DOM insertion re-ordered - no leaks] <html> <head> <script type="text/javascript"> function LeakMemory(){ var hostElement = document.getElementById("hostElement"); // Do it a lot, look at Task Manager for memory response for(i = 0; i < 5000; i++){ var parentDiv = document.createElement("<div onClick='foo()'>"); var childDiv = document.createElement("<div onClick='foo()'>"); hostElement.appendChild(parentDiv); parentDiv.appendChild(childDiv); parentDiv.removeChild(childDiv); hostElement.removeChild(parentDiv); parentDiv = null; childDiv = null; } hostElement = null; } </script> </head> <body> <input type="button" value="Memory Leaking Insert" onclick="LeakMemory()" /> <div id="hostElement"></div> </body> </html> When I execute the code above, the memory taken by IE remains constant. My translation of the above pattern using JQuery is below. However this piece of code leaks memory - every time I execute it, the memory taken by IE increases. ----------------------------------------------------------------------------------- <html> <head> <script type="text/javascript" src="../jsp/assets/scripts/jquery.js"></ script> <script type="text/javascript" src="../jsp/assets/scripts/ selector.js"></script> <script type="text/javascript" src="../jsp/assets/scripts/ajax.js"></ script> <script type="text/javascript" src="../jsp/assets/scripts/event.js"></ script> <script type="text/javascript" src="../jsp/assets/scripts/fx.js"></ script> <script type="text/javascript" src="../jsp/assets/scripts/iutil.js"></ script> <script type="text/javascript" src="../jsp/assets/scripts/ifx.js"></ script> <script type="text/javascript"> function LeakMemory(){ var hostElement = $("#testJquery"); // Do it a lot, look at Task Manager for memory response for(i = 0; i < 1000; i++){ var parentDiv = $('<div id="abc1234"></div>'); var childDiv = $('<div id="efg1234"></div>'); parentDiv.text("test content"); parentDiv.attr({title: "my test tooltip" }); parentDiv.bind("click", function(){ alert( $(this).text() ); }); childDiv.text("test content 1"); childDiv.attr({title: "my test tooltip 1" }); childDiv.bind("click", function(){ alert( $(this).text() ); }); hostElement.append(parentDiv); parentDiv.append(childDiv); childDiv.remove(); parentDiv.remove(); parentDiv = null; childDiv = null; } hostElement = null; } </script> </head> <body> <input type="button" value="Memory Leaking Insert" onclick="LeakMemory()" /> <div id="testJquery"></div> </body> </html> Please help and let me know in case my usage of JQuery is incorrect. Any suggestion to resolve this issue and avoid potential pitfalls with memory leaks would be greatly appreciated. Thanks in advance, Ruchi