innerHTML vs removeChild

JavaScript performance comparison

Revision 198 of this test case created by blackmambahk on 2nd August 2014

Info

An attempt at a realistic simulation.

Assume a set of 400 nodes and there is some change requiring 150 nodes to be replaced.

What is the most efficient way to do that?

InnerHTML test does a complete replacement of all 400 nodes because thats all innerHTML can do, whilst the other tests only change the 150 nodes, the Control test does the same thing on all 400 nodes using remove/appendChild to help better understand the relative performance of innerHTML vs node manipulation. InnerHTML + Clone look to a faster way to replace all nodes.

Conclusion is that although innerHTML is more performant than node manipulation when replacing all child nodes, node manipulation often allows you to do less work and is therefore faster in removing a subset of nodes, noting that even so bulk inserting nodes via insertAdjacentHTML is faster than appending nodes.

The Update tests look to simply update the content of a node instead of removing and then appending it, thereby saving creating new dom nodes. Both test are slower!