JS/DOM Garbage Collector - Leak prevention

KAGRAN22

Hello Folks!

Ive recently read some Articles about Javascript/DOM GC CleanUp Problems when doing operations like

Expand|Select|Wrap|Line Numbers

  
var Obj = createElement("TD");

Obj.onclick = function() { myFunc(); };

document.body.appendChild(Obj);

.....

document.body.removeChild(Obj); //<- Leak because JS function still set

I work right now on a Ajax Grid Class that can have different Events/Properties Attached

I have made the following Code right now to dynamicly remove Events and Objectreferences before removing the DOM Object

(The Sample here demonstrates how i remove entire <TR>'s with Content inside (taking gc Problem into account) / in this case all TR's of a given Table)

Expand|Select|Wrap|Line Numbers

 
            var Table = document.getElementById("myTable");

            for (var iRow = Table.rows.length - 1; iRow >= 1; iRow--) {

              var CurrentRow = Table.rows[iRow];

              var Cell = CurrentRow.getElementsByTagName("TD");

              for (var i=0; i < Cell.length; i++) {

                var InputField = Cell[i];

                for(var Event in InputField) {

                  //alert("Event:"+Event+" Value:"+InputField[Event]+" Typeof:"+typeof(InputField[Event]));

                  if (typeof(InputField[Event]) == "object") { InputField[Event] == null; }

                  if (typeof(InputField[Event]) == "function") { InputField[Event] = null; }

                }

              }

              Table.deleteRow(iRow);

            }

(I also null Objects because i use some Propeties to store Lookup Object References)

Note: Normaly i would just remove a single TR rather hole Content of a Table

To my Questions:
I suppose NULL'ing the Listener destroys the link in the same way as removeEventListener would!?
Is this correct?

My next question is, is the above Sample practicable or too many for loops/properties to work with?
I like it because its dynamically and doesnt seem to need extra attention
(also keep in mind that i would normaly only remove a single TR including its TD Content)
^Drawback it loops through really many unneeded Properties while processing

Or would it be better to make a Pseudo Class for each Grid that hold for every Event the informations and Update according?
But that means extra work also multiple Grids would mean multiple History->EventListeners

or is there a even better aproach?
Hope i can get with some of you people in touch about this ;-)

pronerd

A couple of things come to mind here.

1. First of all I do not see a memory leak in the example provide. The JS function is a child of the "Obj" Object so if you remove the element you destroy it's child elements/attributes too. Also what you are showing is an element that references something else, but for leak to occur your element would have to be referenced by something else.

2. Have you verified that a memory leak is actually happening using run time debugging tools? If not then I would not worry about a theoretical leak.

3. Even if a memory leak does exist it is almost never an issue for JS development since the code's scope is all at page level. As soon as the user goes to the next page all of the elements and objects from the previous page are dropped and the browser starts on rendering/executing the next page. So any leaks that are happening never run long enough to create a problem.

4. Even if a leak really does exist and you for some reason are never going to load any other pages, or refresh the page you are on, I believe you can get around the problem by using anonymous function instances. You would change this:

Expand|Select|Wrap|Line Numbers

Obj.onclick = function() { myFunc(); };

To this :

Expand|Select|Wrap|Line Numbers

Obj.onclick = new Function(" myFunc(); ");

or

Expand|Select|Wrap|Line Numbers

   Obj.onclick = new Function(" ////  Paste your myFunc() code here.  //// ");
 

This will create a new instance of the function instead of a reference to it.

acoder

What you mention about leaving the page preventng memory leaks is not quite true. For example, see Closures - IE memory leak problem. IE can leak memory until the browser is closed if you have a circular reference.

JS/DOM Garbage Collector - Leak prevention

re: JS/DOM Garbage Collector - Leak prevention

re: JS/DOM Garbage Collector - Leak prevention

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about