innerHTML vs removeChild

JavaScript performance comparison

Revision 494 of this test case created by Victor de Oliveira Areas

Preparation code

<div id='box'></div>
      
<script>
Benchmark.prototype.setup = function() {
  var box = document.getElementById('box');
  box.innerHTML = '<ul id="list-options"><li class="list-options__highlight"><img class="list-options__highlight--img" alt="Neymar" src="http://s.glbimg.com//es/sde/f/2014/06/11/8f43a73e5a1046e40507df53aade4cb4_80x80.jpeg">
    <a class="list-options__highlight--link" href="http://google.com/teste/index.html">Neymar</a></li><li class="list-options__suggestion--header"><span>Sugestões de busca</span></li><li class="list-options__suggestion"><a class="list-options__link" href="http://google.com/busca/?q=musica que neymar pediu">musica que <b>neymar</b> pediu</a></li><li class="list-options__suggestion"><a class="list-options__link" href="http://google.com/busca/?q=neymar"><b>neymar</b></a></li><li class="list-options__suggestion"><a class="list-options__link" href="http://google.com/busca/?q=neymar no barcelona"><b>neymar</b> no barcelona</a></li><li class="list-options__suggestion"><a class="list-options__link" href="http://google.com/busca/?q=gol do neymar">gol do <b>neymar</b></a></li><li class="list-options__default"><a class="list-options__default--title" href="http://google.com/busca/?q=neymar">
  <span>buscar </span>
  <span class="list-options__search-by">'neymar'</span>
  <span>na  Teste.com</span>
  </a></li><li class="list-options__default"><a class="list-options__default--title" href="http://google.com/?q=neymar">
  <span>buscar </span>
  <span class="list-options__search-by">'neymar'</span>
  <span>na Web</span>
  </a></li></ul>'

};
</script>

Preparation code output

<div id='box'></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
innerHTML
box.innerHTML = '';
pending…
removeChildLast with display="none"
while (box.lastChild) {
  if (box.lastChild.style) box.lastChild.style.display = 'none';
  box.removeChild(box.lastChild);
}
pending…
removeChildLast
while (box.lastChild) {
  box.removeChild(box.lastChild);
}
pending…
removeChildFirst
while (box.firstChild) {
  box.removeChild(box.firstChild);
}
pending…
child.remove()
let child;

while (child = box.firstChild) {
  child.remove();
}
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.

0 Comments