createDocumentFragment vs appendChild on non-appended element (v17)

Revision 17 of this benchmark created on

Description

Justice

Preparation HTML

<form id="fform"></form>
<script>
window.fform = document.getElementById('fform')
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Normal Append

var elems = [
  document.createElement("hr"),
  text( document.createElement("b"), "Links:" ),
  document.createTextNode(" "),
  text( document.createElement("a"), "Link A" ),
  document.createTextNode(" | "),
  text( document.createElement("a"), "Link B" ),
  document.createTextNode(" | "),
  text( document.createElement("a"), "Link C" )
];

function text(node, txt){
  node.appendChild( document.createTextNode(txt) );
  return node;
}


var div = document.getElementsByTagName("div");

for ( var i = 0; i < div.length; i++ ) {
  for ( var e = 0; e < elems.length; e++ ) {
    div[i].appendChild( elems[e].cloneNode(true) );
  }
}

 
ready
Document Fragment+Form

var elems = [
  document.createElement("hr"),
  text( document.createElement("b"), "Links:" ),
  document.createTextNode(" "),
  text( document.createElement("a"), "Link A" ),
  document.createTextNode(" | "),
  text( document.createElement("a"), "Link B" ),
  document.createTextNode(" | "),
  text( document.createElement("a"), "Link C" )
];

function text(node, txt){
  node.appendChild( document.createTextNode(txt) );
  return node;
}


var div = document.getElementsByTagName("div");

var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
  fragment.appendChild( elems[e] );
}

for ( var i = 0; i < div.length; i++ ) {
  div[i].appendChild( fragment.cloneNode(true) );
}

 
ready

Revisions

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