Adding HTML elements (v8)

Revision 8 of this benchmark created on

Preparation HTML

<div id="container">
</div>

Setup

var container = document.getElementById("container");

Teardown


    function clear() {
      container.innerHTML = '';
    }
    
    clear();

Test runner

Ready to run.

Testing in
TestOps/sec
Append child
for (var n = 0; n < 400; n++) {
  var spanchild = document.createElement("span");
  spanchild.innerText = "test";
  container.appendChild(spanchild);
}
ready
Add string to innerHTML
var spanHTML = "";

for (var n = 0; n < 400; n++) {
  spanHTML += "<span>test</span>";
}

container.innerHTML += spanHTML;
ready
Add joined array to innerHTML
var spanHTML = [];

for (var n = 0; n < 400; n++) {
  spanHTML.push("<span>test</span>");
}

container.innerHTML += spanHTML.join("");
ready
Make innerHTML string
var spanHTML = "";

for (var n = 0; n < 400; n++) {
  spanHTML += "<span>test</span>";
}

container.innerHTML = spanHTML;
ready
Make innerHTML joined array
var spanHTML = [];

for (var n = 0; n < 400; n++) {
  spanHTML.push("<span>test</span>");
}

container.innerHTML = spanHTML.join("");
ready
insertAdjacentHTML with string
var spanHTML = "";

for (var n = 0; n < 400; n++) {
  spanHTML += "<span>test</span>";
}

document.body.insertAdjacentHTML("beforeEnd", spanHTML);
ready
insertAdjacentHTML with joined array
var spanHTML = [];

for (var n = 0; n < 400; n++) {
  spanHTML.push("<span>test</span>");
}

document.body.insertAdjacentHTML("beforeEnd", spanHTML.join(""));
ready
documentFragment with appendChild
var spanchild = document.createElement("span");
var fragment = document.createDocumentFragment();

for (var n = 0; n < 400; n++) {
  spanchild.innerText = "test";
  fragment.appendChild(spanchild);
  container.appendChild(fragment.cloneNode(true));
}
ready

Revisions

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