innerHTML vs removeChild (v497)

Revision 497 of this benchmark created by Victor de Oliveira Areas on

Preparation HTML

<ul id='box'></ul>

Setup

var box = document.getElementById('box');
  box.innerHTML = `<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>`

Test runner

Ready to run.

Testing in
TestOps/sec
removeChildFirst
while (box.firstChild) {
  box.removeChild(box.firstChild);
}
ready
removeChildLast with display="none"
while (box.lastChild) {
  if (box.lastChild.style) box.lastChild.style.display = 'none';
  box.removeChild(box.lastChild);
}
ready
child.remove()
let child;

while (child = box.firstChild) {
  child.remove();
}
ready
removeChildLast
while (box.lastChild) {
  box.removeChild(box.lastChild);
}
ready
innerHTML
box.innerHTML = '';
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.