JQuery UI garbage collection

JQuery UI garbage collection

Folks,
I created a ticket last night in jQuery forum but moved it to here as I think it is more related. The subject was " How to measure DOM size?" and it raises questions that would effect app writers (be it for intranet or hand held devices).

My initial tests came back with some scary results, but further analysis reversed those thoughts and told me that overall, its a non-issue but I still thought I would share my results. (I discovered that some UI effects clean up better than others). 

For reference, my developement environment Firefox 18, jQuery 1.8.3 and jQuery UI 1.9.2

For those new to jQuery let me give you a brief insight: When using jQueryUI, the DOM, or the HTML page that your browser has is manipulated. The page can grow or shrink depending on your scripted actions. For example, using Dialog or Tabs means your page will dynamically grow as your jQuery related functions get called, because the functions dynamically add a combination of HTML/CSS code to give the browser UI (user interface) the attractive pop up or tab functionality. 

When switching from one tab to another, the DOM increments only once, by 1. Thus, click five tabs, your DOM is still only +1.

AutoComplete behaved differently. My application has six tabs, containing a total of eight autocomplete input fields. I found the results varied depending on the number of results suggested. Thus, an autocomplete on employee names that offered me three suggestions, DOM +6. A seperate autocomplete on another tab means the DOM grew again, +2 for each suggested option. The suggested options for one input field did not replace legacy code left over from other  autocomplete suggestions of another input field. This meant if I used all auto complete fields, and they all offered me two suggestions, the DOM would grow by +16 (two for each suggestion across eight autocomplete fields).

Dialog increments the DOM by 16 - however I remove my Dialog when the close button is clicked using remove() and the DOM appears to increment by +1 only. How many developers think of removing what they just dynamically created I ask myself?

The garbage collection appears to be pretty good compared to some code I have seen elsewhere and I raise my hat in appreciation to the development teams across the globe.

For those interested in simulating my tests on their own development environment, this is what I have done:

  1. function EventDev()
  2. {
  3. var x=0, y=0;
  4. $("*").each( function() 
  5. {  if( $(this).attr("oddball")==1 )
  6. { ++x; }
  7. else
  8. { ++y; }
  10. });
  11. alert("== EventDev ==\nx="+x+"\ny="+y);
  12. }

  14. $(document).ready(function(){
  15.                 $("#devtest").click( EventDev );

  17. $("*").attr("oddball",1);

  19. });

Above, at line 14, when the document (html page) is fully loaded, an event at line 15 is assigned to a link in my page that has an ID="devtest". When the link is executed, EventDev() is executed (this allows me to take a score when ever I want).

The last action I do during document.ready status is to add "oddball=1" to every tag in my page. Some developer addons for browsers like Firefox allow you to View Generated Source. If you do this, you will find your page has "oddball=1" everywhere, including <body>, <script>, <table>, <div> etc etc. This means that any HTML that gets added after this point is new dynamic code and thus will not have the "oddball=1" argument.

Again... for the record: The garbage collection appears to be pretty good compared to some code I have seen elsewhere and I raise my hat in appreciation to the development teams across the globe.
 
I'm interested in comments on the above...