append-childs

JavaScript performance comparison

Test case created by snewcomer

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var template = document.createElement('template');
  var inner = "<h1>hi</h1><h2>boo</h2><h1>hi</h1><h2>boo</h2><ul><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li><li class='bar'><span class='bandage'>Bandage</span></li></ul>"
  template.innerHTML = `<div>${inner}</div>`.trim()
  
  var childNodes = [];
  var i = 0
  while (i < 10) {
    var elem = document.createElement('li');
    elem.innerText = "hoover";
    childNodes.push(elem);
    i++
  }
  
  fromEl = template.content.firstChild

};
</script>

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
loop - prepend
let firstChild = fromEl.childNodes[0];
for (let i = 0, len = childNodes.length; i < len; i++) {
  fromEl.insertBefore(childNodes[i], firstChild)
}
pending…
loop - append
for (let i = 0, len = childNodes.length; i < len; i++) {
  fromEl.appendChild(childNodes[i]);
}
pending…
insertAdjacentHTML - prepend
fromEl.insertAdjacentHTML("afterbegin", inner)
pending…
insertAdjacentHTML - append
fromEl.insertAdjacentHTML("beforeend", inner)
pending…
doc fragment
let fragment = document.createDocumentFragment();

for (let i = 0, len = childNodes.length; i < len; i++) {
  fragment.appendChild(childNodes[i])
}

fromEl.appendChild(fragment)
pending…
doc fragment prepend
let fragment = document.createDocumentFragment();

for (let i = 0, len = childNodes.length; i < len; i++) {
  fragment.appendChild(childNodes[i])
}

fromEl.insertBefore(fragment, fromEl.childNodes[0])
pending…

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

Compare results of other browsers

0 Comments