Thursday, March 15, 2007

DOM innerHTML vs appendChild

There's a lot of debate on whether to use innerHTML or to add in HTML elements using DOM methods. Personally I prefer to use innerHTML because it is easier to use. innerHTML is said to be faster as well.

For comparison, I have develop 2 functions to create a table with 100 rows and 5 columns.

1) An array is use to built the Table HTML string. Then it is appended into innerHTML of a div "content".

function init(){
var ihtml = "<table id='mytable'>";
for(var i=1; i<=100; i++){
ihtml += "<tr id='row" + i + "'>";
for(var j=1; j<=5; j++){
ihtml += "<td id='col" + i + "_" + j + "'>" + i +

"_" + j + "</td>";
}
ihtml += "</tr>";
}
ihtml += "</html>";
document.getElementById("content").innerHTML = ihtml;
}


2) A DOM table is built and append into the div "content".

function init(){
var table=document.createElement("table");
table.setAttribute("id", "mytable");
for(var i=1; i<=100; i++){
var tr = document.createElement("tr");
tr.setAttribute("id", "row" + i);
for(var j=1; j<=5; j++){
var td = document.createElement("td");
td.setAttribute("id", "col" + i + "_" + j);
td.appendChild(document.createTextNode(i + "_" + j))
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("content").appendChild(table)
}


I use Firebug profile to time the function. So what the performance result difference should I expect?




function 1(innerHTML)function 2
Average Time60 ms130 ms


Both function manage to execute in miliseconds. But, function 1 (innerHTML) is two time faster the DOM methods. I have increase it to 1000 rows and the result is the same, innerHTML is twice as fast. As a conclusion, innerHTML is much faster for more complex/larger DOM manipulation.

Add to del.icio.us

7 comments:

Tommy Valand said...

Have you tried using a DocumentFragment to increase performance when using the DOM to create nodes?

http://beta.oreillynet.com/pub/a/javascript/2003/05/06/dannygoodman.html?page=2

Tim Tripcony said...

Variations in browser implementations of the DOM also sometimes make innerHTML desirable: for example, I.E.'s support of getAttribute and setAttribute is generally pretty weak. The downside of innerHTML is that, if anything is set incorrectly, you can't easily debug where things went wrong; with the DOM, it'll tell you precisely what tag or attribute was handled incorrectly.

Mark said...

The performance of the innerHTML method can be further increased (approx. 10%) by using:

ihtml = ihtml + 'something';

instead of:

ihtml += 'something';

William Beh said...

@Tommy, I have tried using DocumentFragment. Yes, it is faster then using DOM to create nodes. From my test it lies somewhere in between innerHTML and DOM createElement & appending directly to the document.

@Tim, Yes you have to correctly code your HTML. But thanks to Firebug & IE Developer, you can inspect the DOM to check if there's anything wrong.

@Mark. ihtml = ihtml + 'something' definitely increase the performance slightly.

Thanks for the info guys.

Tommy Valand said...

If you concatenate the strings using an array, you could possibly get even better performance when dealing with a large amount of innerHTML.

..
arrHTML.push("<tr>")..
..

elem.innerHTML = arrHTML.join("")

See here for benchmark: http://www.quirksmode.org/dom/innerhtml.html

Rene said...

Another tip to speed up loops:

Reversing loop conditions so that they count down instead of up can double the speed of loops. Counting down to zero with the decrement operator (i--) is faster than counting up to a number of iterations with the increment operator (i++)

(much more info at http://www.devwebpro.com/devwebpro-39-20030514OptimizingJavaScriptforExecutionSpeed.html)

Afam said...

this is not an apples to apples comparison.

The first init function only creates a string through the for loop, and then calls innerHTML at the very end.

The second init function calls appendChild for each run through the for loop.

A more accurate comparison would call the innerHTML function through each iteration of the for loop.