IE6 Form Tag Orphans

Had an interesting bug passed by me for “input” today, that I’ve consequently spent all evening playing around with and testing. It’s a doozy.

Apparently if you try to remove/destroy/trash a FORM dom node in IE6, it won’t delete it, instead creating a bizarre orphaned node stuck sucking up memory until the browser window is refreshed.

Why’s that an issue

If you have a “web application” that uses any form of partial page loading, and the content you are loading contains any form elements, in IE6 memory usage will climb as you use the app, leading to initially a sluggish browser and finally total terminal failure.

As many of the toolkits these days come with this style of content loading mechanism (take for example my toolkit of choice dojo, with it’s contentPanes), it’s very easy to get into a situation where your webapp will be unacceptable to folks using IE.

I sat down and put together a series of test cases (beware these will do nothing interesting in anything other than sIEve, so you really need to run them in there (but I do attach screen shots in case you don’t have sIEve close to hand).

The craziest thing is that after doing some fairly comprehensive research, I found only 1 other mention of this specific issue, and none of the leak fixes or garbage collection techniques work.

Approaches Tested

  • innerHTML on parent (most common garbage collection)
  • Using removeNode, rather than removeChild
  • Using replaceNode before removing it
  • Resetting all variables before removing it
  • Giving it a HasLayout (I was desperate)
  • Setting AutoComplete to off on the form
  • collectGarbage()
  • Crockfords Purge
  • …

I’ll keep thinking on this, anyone has any suggestions please feel free to throw them out and I’ll add them to the tests. Right now it’s 12.30am and I’m going to sit and watch Gordon Ramsey and drink a beer.

Edit:

Additional commentary on Ajaxian.com, fingers crossed there is a collective solution soon.

AW’s comment below includes this code…

  1.  
  2.     function MyForm() {
  3.         this.InstanceId = ”+MyForm.InstanceCounter++;
  4.         MyForm.Instances[this.InstanceId] = this;
  5.         for( var key in MyForm.Recycle ) {
  6.             this.Node = MyForm.Recycle[key];
  7.             delete MyForm.Recycle[key];
  8.         }
  9.         if( this.Node==null ) {
  10.             this.Node = document.createElement(‘FORM’);
  11.         }
  12.         this.Node.InstanceId = this.InstanceId;
  13.     }
  14.  
  15.         MyForm.prototype.InstanceId = null;
  16.         MyForm.prototype.Node = null;
  17.  
  18.         MyForm.prototype.destroy = function() {
  19.             if( this.Node.parentNode ) this.Node.parentNode.removeChild(this.Node);
  20.             MyForm.Recycle[this.InstanceId] = this.Node;
  21.             delete MyForm.Instances[this.InstanceId];
  22.             this.Node = null;
  23.         }
  24.  
  25.     MyForm.InstanceCounter = 1;
  26.     MyForm.Instances = {};
  27.     MyForm.Recycle = {};
  28.  
  29.     // create and destroy 10000 forms
  30.     var a;
  31.     for( var i = 0; i <= 10000; i++){
  32.      
  33.       //create a new form
  34.       var b = new MyForm();
  35.       // add the new form to the body
  36.         var a = document.body.appendChild(b.Node);
  37.         //destroy the form
  38.         b.destroy();
  39.         //break;
  40.  
  41.     }
  42.  

I’ve added this code to the test suite and it seems to solve the issue !!!

About this entry

You’re currently reading “IE6 Form Tag Orphans,” an entry on jpsykes

Published:
09.19.07 / 11pm
Category:
Uncategorized