Thursday, September 20th, 2007

IE6 Leak on Form Tag

Category: IE

Jon Sykes happened across another IE 6 leak to do with form tag orphans. The bug means that (as of yet) there seems to be no way of removing a FORM tag from the DOM without it resulting in an orphaned node and increased memory consumption.

It seems to have minimal documentation, and I can’t see any obvious solution.

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.

It’s been a tough week for memory leaks.

Posted by Dion Almaer at 5:38 am
17 Comments

++++-
4.2 rating from 30 votes

17 Comments »

Comments feed TrackBack URI

Damnit! I have tons of this going on.

Comment by Ben Bodien — September 20, 2007

For these types of applications, I generally have one FORM tag encapsulating the entire page. I then have my update functions change the action on the form, thus not having to add (and supposedly not remove), form tags at all.

Comment by James MacFarlane — September 20, 2007

@James. You are obviously unable to nest forms, so to get around this you use one giant form and change the action and send all of the data onSubmit?

Comment by emehrkay — September 20, 2007

Fix: set the elements collection to null.
form.elements = null;

Comment by Sjoerd Mulder — September 20, 2007

@ James, yup there are a number of ways to ‘mitigate’ the impact, my bigger concern was in situations where those options aren’t possible and a true fix/hack/workaround is needed. A good example is a situation we often get at work, where many of the pages already exist in a traditional web architecture, and we then need to convert them into a more rich ‘web2.0’ style setup, with a minimal change to the page code. It also occurs if you’re working in a progressive enhancement situation where the code needs to work in both worlds. Final issue, is pages that have lots of forms, having one just isn’t practical if the original page has 10+ forms in it.

Comment by JP — September 20, 2007

@Sjoerd : could you explain more what you mean? The code you posted just throws exceptions in IE6.

Comment by JP — September 20, 2007

Oops, sorry guys

After restarting my IE6 i also was getting the errors, maybe because of the earlier pollution i wasnt get any errors and the script wasnt continuing in it’s loop (and so creating only 1 form tag).

Will look further ;-)

Comment by Sjoerd Mulder — September 20, 2007

Now i found it (and without errors), after the removeChild() call the removeNode()

document.body.removeChild(a);
a.removeNode();

Comment by Sjoerd Mulder — September 20, 2007

Tried:
removeNode() after traditional garbage collection, no cigar.

for( var x = 0; x

and removeChild then removeNode as you mentioned above, no cigar.


for( var x = 0; x

Comment by JP — September 20, 2007

^ sorry about that, note to self, posting code will not work.

Comment by JP — September 20, 2007

This works for me:

for( var x = 0; x <= 5000; x++ ) {
var a = document.createElement(‘form’);
var b = document.body.appendChild(a);
document.body.removeChild(b);
b.removeNode();
}

Commenting out the removeNode introduces memory increase (leaks in Drip)

Comment by Sjoerd Mulder — September 20, 2007

Weird I still get the 10000 orphaned nodes

with this test in sIEve

Comment by JP — September 20, 2007

MS needs to use that auto-update without user notification feature again to updated everyone to IE7. Or better yet some needs to hack that auto update without notification feature to replace everyones copies of IE with Firefox.

Comment by Twist — September 20, 2007

General quirk.. a blank page with a form node reports as having 2 references to the form node for “in use” under sIEve.

Why? Is this part of the problem?

Comment by TI — September 20, 2007

Twist… Please tell us your joking. I was one of those on the phone to MS the day they gorilla pushed IE7 on our enterprise. We had less impact from the MyDoom worm.

Comment by Chris — September 20, 2007

@ TI: Yup I see that too, what’s awesome is running…


<script type="text/javascript" charset="utf-8">
for( var x = 0; x <= 10000; x++ ) {
document.getElementById('holder').innerHTML = "<form></form>";
document.getElementById('holder').innerHTML = "";
}

</script>

Seems to still leave you with 10009 nodes “in use”. I’m at a lose.

Comment by JP — September 20, 2007

Update using the solutions detailed above.

I have examples of it in action against the test cases, and a quick and dirty example of it used as part of Dojo’s ContentPane widget.

Comment by JP — September 24, 2007

Leave a comment

You must be logged in to post a comment.