471,887 Members | 853 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,887 software developers and data experts.

JS/DOM Garbage Collector - Leak prevention

Hello Folks!

Ive recently read some Articles about Javascript/DOM GC CleanUp Problems when doing operations like
Expand|Select|Wrap|Line Numbers
  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
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.             }
(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
2 1671
392 Expert 256MB
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(); ");
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
16,027 Expert Mod 8TB
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.

Similar topics

1 post views Thread by jzink | last post: by
2 posts views Thread by Lasse Skyum | last post: by
8 posts views Thread by HalcyonWild | last post: by
28 posts views Thread by Goalie_Ca | last post: by
56 posts views Thread by Johnny E. Jensen | last post: by
4 posts views Thread by daniel.internet | last post: by
72 posts views Thread by Sebastian Nibisz | last post: by
350 posts views Thread by Lloyd Bonafide | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.