IE performance

Trying to get my table to draw really fast in IE. So far, the fastest way seems to be this:

var frag = $(document.createDocumentFragment());
builtContent = "";
for(var i = 0; i < LOOPSIZE; i++){
builtContent += CONTENT;
}
frag.append(builtContent);
$(testTable).append(frag);


Building a giant html string and adding it is like 3x as fast as doing it row by row.

Here's my test page:

$(document).ready(function(){

var LOOPSIZE = 100;
var CONTENT = "hello! ";

var testTable = $("#testTable");



Util.logger.startTimer("$(.append)");
for(var i = 0; i < LOOPSIZE; i++){
$("#testTable").append(CONTENT);
}
Util.logger.stopTimer("$(.append)");



Util.logger.startTimer("frag");
var frag = $(document.createDocumentFragment());

for(var i = 0; i < LOOPSIZE; i++){
frag.append(CONTENT);
}
testTable.get(0).appendChild( frag.get(0) );

Util.logger.stopTimer("frag")




Util.logger.startTimer("frag+innerHTML");
var frag = $(document.createDocumentFragment());
builtContent = "";
for(var i = 0; i < LOOPSIZE; i++){
builtContent += CONTENT;
}
frag.append(builtContent);
testTable.get(0).appendChild( frag.get(0) );

Util.logger.stopTimer("frag+innerHTML");




Util.logger.startTimer("$(testTable).append(frag)");
var frag = $(document.createDocumentFragment());
builtContent = "";
for(var i = 0; i < LOOPSIZE; i++){
builtContent += CONTENT;
}
frag.append(builtContent);
$(testTable).append(frag);

Util.logger.stopTimer("$(testTable).append(frag)");





Util.logger.startTimer("frag+innerHTMLARR");
var frag = $(document.createDocumentFragment());
builtContentArr = [];
for(var i = 0; i < LOOPSIZE; i++){
builtContentArr.push(CONTENT);
}
frag.append(builtContentArr.join());
testTable.get(0).appendChild( frag.get(0) );

Util.logger.stopTimer("frag+innerHTMLARR");



Util.logger.startTimer("innerHTML");
builtContent = "";
for(var i = 0; i < LOOPSIZE; i++){
builtContent += CONTENT;
}
testTable.append(builtContent);

Util.logger.stopTimer("innerHTML");

Util.logger.printTimes();

and the results


IE6

24:3:773 Timer: $(.append) total elapsed time is 469 ms.

24:3:789 Timer: frag total elapsed time is 359 ms.

24:3:789 Timer: frag+innerHTML total elapsed time is 187 ms.

24:3:805 Timer: $(testTable).append(frag) total elapsed time is 172 ms.

24:3:805 Timer: frag+innerHTMLARR total elapsed time is 188 ms.

24:3:820 Timer: innerHTML total elapsed time is 172 ms.


Firefox

23:35:797 Timer: $(.append) total elapsed time is 114 ms.

23:35:800 Timer: frag total elapsed time is 77 ms.

23:35:803 Timer: frag+innerHTML total elapsed time is 17 ms.

23:35:805 Timer: $(testTable).append(frag) total elapsed time is 18 ms.

23:35:807 Timer: frag+innerHTMLARR total elapsed time is 23 ms.

23:35:808 Timer: innerHTML total elapsed time is 34 ms.