[jQuery] JQuery DOM manipulation: memory leaks?

Ruchi Thu, 31 May 2007 08:00:41 -0700

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

[jQuery] JQuery DOM manipulation: memory leaks?

Reply via email to