Hello, I'm trying to optimize a sortable table I've written. The bottleneck is in the dom manipulation. I'm currently creating new table rows and inserting them every time I sort the table. I'm wondering if I might be able to speed things up by simple rearranging the rows, not recreating the nodes. For this to make a significant difference, dom node rearranging would have to be a lot snappier than node creating. Is this the case? thanks, -Morgan
+1
A:
I don't know whether creating or manipulating is faster, but I do know that it'll be faster if you manipulate the entire table when it's not on the page and then place it on all at once. Along those lines, it'll probably be slower to re-arrange the existing rows in place unless the whole table is removed from the DOM first.
This page suggests that it'd be fastest to clone the current table, manipulate it as you wish, then replace the table on the DOM.
Daniel Lew
2009-02-16 18:56:40
oh. interesting. Thanks.
morgancodes
2009-02-16 19:05:01
A:
I'm drawing this table about twice as quickly now, using innerHTML, building the entire contents as a string, rather than inserting nodes one-by-by.
morgancodes
2009-02-16 22:06:35
Instead of string = string + newstring, use an array: var a=[]; while(loop){ a.push(newstring) } result = a.join(""); // String concatenation in IE is terrible slow. I did a test once where Opera finished in about 4 seconds, and IE still hadn't finished after 20 minutes.
some
2009-02-17 00:24:47
Yeah, I came across that too, but with what I'm doing, it seems that it's still faster to add dom nodes than use innerHTML in IE6.
morgancodes
2009-02-17 14:22:14