Document fragment (v22)

Revision 22 of this benchmark created by Kyle Van Berendonck on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id='someElement'>
</div>

Teardown


    $('#someElement').html('');

Test runner

Ready to run.

Testing in
TestOps/sec
No Fragment
var divContainer = document.createElement("div");
divContainer.id = "container";
for (var i = 0; i < 300; i++) {
  var div = document.createElement("div");
  div.innerHTML = 'hello, world';
  divContainer.appendChild(div);
}
document.getElementById("someElement").appendChild(divContainer);
ready
Fragment
var fragment = document.createDocumentFragment();
for (var i = 0; i < 300; i++) {
  var div = document.createElement("div");
  div.innerHTML = 'hello, world';
  fragment.appendChild(div);
}
var divContainer = document.createElement('div');
divContainer.id = "container";
divContainer.appendChild(fragment);
document.getElementById("someElement").appendChild(divContainer);
ready
InnerHTML
var divContainer = '<div id="container">';

for (var i = 0; i < 300; i++) {
  divContainer += '<div>hello, world</div>';
}
divContainer += '</div>'; 
document.getElementById("someElement").innerHTML = divContainer;
ready
InnerHTML String Builder
var divContainer = ['<div id="container">'];

for (var i = 0; i < 300; i++) {
  divContainer.push('<div>hello, world</div>');
}
divContainer.push('</div>'); 
document.getElementById("someElement").innerHTML = divContainer.join('');
ready

Revisions

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