By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,153 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

JS/DOM Garbage Collector - Leak prevention

P: 1
Hello Folks!

Ive recently read some Articles about Javascript/DOM GC CleanUp Problems when doing operations like
Expand|Select|Wrap|Line Numbers
  1.  
  2. var Obj = createElement("TD");
  3. Obj.onclick = function() { myFunc(); };
  4. document.body.appendChild(Obj);
  5. .....
  6. document.body.removeChild(Obj); //<- Leak because JS function still set
  7.  
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
  1.             var Table = document.getElementById("myTable");
  2.             for (var iRow = Table.rows.length - 1; iRow >= 1; iRow--) {
  3.               var CurrentRow = Table.rows[iRow];
  4.               var Cell = CurrentRow.getElementsByTagName("TD");
  5.               for (var i=0; i < Cell.length; i++) {
  6.                 var InputField = Cell[i];
  7.                 for(var Event in InputField) {
  8.                   //alert("Event:"+Event+" Value:"+InputField[Event]+" Typeof:"+typeof(InputField[Event]));
  9.                   if (typeof(InputField[Event]) == "object") { InputField[Event] == null; }
  10.                   if (typeof(InputField[Event]) == "function") { InputField[Event] = null; }
  11.                 }
  12.               }
  13.               Table.deleteRow(iRow);
  14.             }
  15.  
(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 ;-)
Aug 21 '08 #1
Share this Question
Share on Google+
2 Replies


Expert 100+
P: 392
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
  1.   Obj.onclick = function() { myFunc(); };
To this :

Expand|Select|Wrap|Line Numbers
  1.   Obj.onclick = new Function(" myFunc(); ");
or
Expand|Select|Wrap|Line Numbers
  1.   Obj.onclick = new Function(" ////  Paste your myFunc() code here.  //// ");

This will create a new instance of the function instead of a reference to it.
Aug 26 '08 #2

acoder
Expert Mod 15k+
P: 16,027
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.
Aug 28 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.