createDocumentFragment vs. createElement

Benchmark created by Alexander Behrens on

Description

If we want to insert multiple nodes to the DOM on the same level, it is useful to use createDocumentFragment. But if you want to add a single element, that itself holds a lot of other nodes, to the DOM, should we wrap it into a document fragment?

Test runner

Ready to run.

Testing in
TestOps/sec
createDocumentFragment
var fragment = document.createDocumentFragment();
var element = document.createElement("div");

fragment.appendChild(element);

for (var i = 0; i < 10; i++) {
  var div = document.createElement("div");
  div.innerHTML = "headline " + i;
  div.style.display = "none";
  element.appendChild(div);
}

document.body.appendChild(fragment);
 
ready
createElement
var element = document.createElement("div");

for (var i = 0; i < 10; i++) {
  var div = document.createElement("div");
  div.innerHTML = "headline " + i;
  div.style.display = "none";
  element.appendChild(div);
}

document.body.appendChild(element);
 
ready

Revisions

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

  • Revision 1: published by Alexander Behrens on