innerHTML vs removeChild
JavaScript performance comparison
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!
Preparation code
<div id="container"></div>
<style type="text/css">
#box, #box * {
fontsize: 0;
}
#box * {
display: inlineblock;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
backgroundcolor: blue;
}
</style>
<script>
Benchmark.prototype.setup = function() {
var box = document.createElement('div');
box.id = 'box';
document.getElementById('container').appendChild(box);
function refill(){
var box = document.getElementById('box');;
var html='';
var n = '<div><span>a</span><span>a</span><span>a</span><span>a</span><span>a</span><span>a</span><span>a</span><span>a</span><span>a</span><span>a</span></div>';
for(i=0;i<400;i++)html+=n;
box.innerHTML=html;
}
refill();
};
Benchmark.prototype.teardown = function() {
document.getElementById('container').removeChild(box);
};
</script>
Preparation code output
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
Test  Ops/sec  

RemoveChild 

pending… 
Range 

pending… 
InnerHTML 

pending… 
Append 

pending… 
Control 

pending… 
Update 

pending… 
Update outside dom 

pending… 
InnerHTML+Clone 

pending… 
InnerText/InnerHTML 

pending… 
Fragment 

pending… 
Fragment Partial 

pending… 
Frag Partial 400 

pending… 
Frag 400 InnerText 

pending… 
Compare results of other browsers
Revisions
You can edit these tests or add even more tests to this page by appending /edit
to the URL. Here’s a list of current revisions for this page:
 Revision 1: published by Ali Mihandoost
 Revision 2: published by Ali Mihandoost
 Revision 5: published by XP1
 Revision 6: published
 Revision 7: published
 Revision 8: published
 Revision 9: published
 Revision 10: published
 Revision 11: published
 Revision 12: published
 Revision 13: published
 Revision 14: published by Philip O'Brien
 Revision 15: published
 Revision 16: published
 Revision 17: published by Grant Kiely
 Revision 18: published
 Revision 19: published by Grant Kiely
 Revision 20: published by Grant Kiely
 Revision 23: published
 Revision 24: published
 Revision 25: published
 Revision 26: published
 Revision 28: published by nickinuse
 Revision 32: published
 Revision 33: published
 Revision 34: published
 Revision 35: published
 Revision 36: published
 Revision 37: published by Thomas Lindstrøm
 Revision 38: published
 Revision 40: published
 Revision 41: published by Thomas Lindstrøm
 Revision 42: published by Tomás Girardi
 Revision 43: published by Filip Smets
 Revision 44: published
 Revision 45: published by resnyanskiy
 Revision 47: published
 Revision 48: published
 Revision 49: published
 Revision 50: published by johnchen902
 Revision 51: published
 Revision 52: published by cromwellian
 Revision 53: published
 Revision 54: published
 Revision 55: published
 Revision 56: published
 Revision 57: published
 Revision 58: published
 Revision 59: published by arjun
 Revision 60: published
 Revision 61: published
 Revision 62: published by Paulo Barcelos
 Revision 63: published
 Revision 64: published
 Revision 65: published
 Revision 66: published
 Revision 67: published
 Revision 68: published
 Revision 69: published
 Revision 71: published
 Revision 72: published
 Revision 73: published
 Revision 74: published
 Revision 76: published
 Revision 77: published
 Revision 78: published
 Revision 79: published
 Revision 80: published
 Revision 81: published
 Revision 82: published
 Revision 83: published
 Revision 84: published
 Revision 85: published
 Revision 86: published
 Revision 87: published
 Revision 88: published
 Revision 89: published and last updated
 Revision 90: published
 Revision 91: published
 Revision 93: published
 Revision 94: published
 Revision 95: published by Drew Noakes
 Revision 96: published
 Revision 97: published
 Revision 98: published
 Revision 99: published by Jie Ren
 Revision 100: published
 Revision 101: published by José Luis
 Revision 102: published
 Revision 103: published
 Revision 104: published
 Revision 105: published
 Revision 106: published
 Revision 108: published by prashant sheoran
 Revision 109: published by herrernst
 Revision 110: published
 Revision 115: published
 Revision 117: published by Eamon Nerbonne
 Revision 120: published by Eamon Nerbonne
 Revision 123: published
 Revision 124: published by Heavensrevenge
 Revision 125: published
 Revision 126: published by Alex Zielenski
 Revision 127: published
 Revision 128: published
 Revision 129: published
 Revision 130: published
 Revision 131: published
 Revision 132: published
 Revision 133: published by deser
 Revision 134: published by Matt Harker
 Revision 135: published
 Revision 137: published by DanMan
 Revision 138: published by DanMan
 Revision 139: published by empty
 Revision 140: published by empty
 Revision 141: published by empty
 Revision 142: published by empty
 Revision 143: published by empty
 Revision 144: published by empty
 Revision 146: published
 Revision 147: published
 Revision 148: published
 Revision 149: published
 Revision 150: published
 Revision 151: published
 Revision 152: published
 Revision 154: published
 Revision 155: published
 Revision 156: published
 Revision 157: published by Stuart P. Bentley
 Revision 158: published
 Revision 160: published by Joshua Koudys
 Revision 161: published by Joshua Koudys
 Revision 162: published by Joshua Koudys
 Revision 163: published by aaaaa
 Revision 167: published by npjohns
 Revision 168: published
 Revision 169: published
 Revision 172: published by roland
 Revision 173: published
 Revision 174: published
 Revision 176: published
 Revision 177: published by olli k
 Revision 178: published
 Revision 180: published by Alex
 Revision 182: published
 Revision 184: published
 Revision 185: published
 Revision 186: published by Deep
 Revision 187: published
 Revision 189: published by Dave
 Revision 190: published
 Revision 191: published by hansifer
 Revision 193: published
 Revision 194: published
 Revision 195: published
 Revision 197: published
 Revision 198: published by blackmambahk
 Revision 199: published by blackmambahk
 Revision 200: published
 Revision 201: published by Harald Glatt
 Revision 202: published by Harald Glatt
 Revision 203: published by blackmambahk
 Revision 204: published by Qix
 Revision 205: published
 Revision 206: published
 Revision 207: published
 Revision 208: published
 Revision 209: published
 Revision 210: published
 Revision 211: published
 Revision 212: published
 Revision 213: published
 Revision 215: published
 Revision 216: published
 Revision 217: published by X
 Revision 218: published
 Revision 219: published
 Revision 220: published by include for removeNode loop
 Revision 221: published
 Revision 222: published
 Revision 223: published
 Revision 233: published
 Revision 234: published
 Revision 237: published
 Revision 238: published
 Revision 239: published
 Revision 242: published
 Revision 243: published by Mark Everitt
 Revision 244: published by Tri
 Revision 245: published
 Revision 246: published
 Revision 247: published
 Revision 248: published by Tri
 Revision 250: published by fefw
0 comments