세고비아의 이글루

Followup previous article on innerHTML performance, I now take a look at what is the better way to built the HTML string for the innerHTML.

I use 2 for loop to built a table with 1000 rows and 5 columns. 4 different ways of building the string is tested. The test is done on Firefox 2.

1) str += ...
2) str = str + ...
3) str = str.concat(... , ...)
4) str.push(... , ...)

Below is the javascript sample for the 4th test cases

function init(){
console.time("String")
var newStr = new Array("<table>");
for(var i=0; i<1000; i++){
newStr.push("<tr>");
for (var j=0; j<5; j++){
newStr.push("<td>row ", i, " col ", j, "</td>");
}
newStr.push("</tr>");
}
newStr.push("</table>");
document.getElementById("content").innerHTML = newStr.join("");
console.timeEnd("String");
}