I am developing a site which creates many table rows dynamically. The total amount of rows right now is 187. Everything works fine when creating the rows, but in IE when I leave the page, there is a large amount of lag. I do not know if this is some how related to the heavy DOM manipulation I am doing in the page? I do not create any function closures when building the dynamic content's event handlers so I do not believe this problem is related to memory leaks. Any insight is much appreciated.
+1
A:
Are you creating the element nodes by hand, or using innerHTML? Although I'm not sure, my suspicion is that IE has its own memory leaks related to HTML nodes.
I made a demo page that adds 187 rows to a table via jQuery. I believe jQuery.append() uses a clever little trick to turn a string into a set of nodes. It creates a div and sets the innerHTML of that div to your string, and then clones all the child nodes of that div into the node you specify before finally deleting the div it created.
http://www.andrewpeace.com/stackoverflow/rows/rows.html
I'm not getting any lag in IE8, but maybe it will lag in the version you're using. I'd love it if you'd let me know! Maybe I can help some more.
Peace
apeace
2009-06-11 13:08:46
I originally created a anchor tag and then set the click hander for that anchor tag to a function closure, but I relize now IEs garbage collector is unaware of circular references, so I changed it so now I create a span and set its innerHTML to the anchor tag that I was previously creating using document.createElement, I like your example, but your page is simple text, I have many images and such on the page Im working on so I dont feel your example is comparable to my implemntation.
ForYourOwnGood
2009-06-11 23:59:57
A:
YUI (and probably some other popular javascript libraries) provides automatic listener cleanup, so I highly recommend using YUI or another library with this feature to minimize problems with IE. However, it sounds like you might be experiencing plain slowness rather than any kind of memory leak issue; you are attaching event handlers to a whole bunch of elements. IE6 is known to be less than optimized, so it might just be taking forever to clean everything up.
apeace also has a good point: innerHTML can get you in trouble and set you up with DOM weirdness. It sounds like JQuery has a fix for that.
A:
Try taking advantage of event bubbling to replace all event handlers with just one.
porneL
2009-06-14 15:56:07
A:
I agree with porneL. Attach one event handler to the <table> and let bubbling work its magic. Most frameworks provide a way for you to find the element that caused the original event (usually referred to as a "target").
If you're making lots of elements using document.createElement(), you can add them to a DOM fragment. When you append the fragment to the page, it appends all the child nodes attached to it. This operation is faster than appending each node one-at-a-time. John Resign has a great write-up on DOM document fragments: http://ejohn.org/blog/dom-documentfragments/
gscottolson
2010-03-23 16:54:04