documentFragment appendChild vs jquery append (v17)

Revision 17 of this benchmark created on

Preparation HTML

<div id="test-area" style="height: 75px; width: auto; overflow:scroll">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var test_area = document.getElementById('test-area');
    var $test_area = $(test_area);

Teardown


    $test_area.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
insert document fragment
var fragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode('The quick brown fox jumps over the lazy dog'));
  fragment.appendChild(p);
}

test_area.appendChild(fragment);
ready
direct insert
for (var i = 0; i < 1000; i++) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode('The quick brown fox jumps over the lazy dog'));
  test_area.appendChild(p);
}
ready
jQuery insert div
var div = $('<div>');

for (var i = 0; i < 1000; i++) {
  var p = $('<p>');
  p.append('The quick brown fox jumps over the lazy dog');
  div.append(p);
}

// not functionally equivalent to other snippets
$test_area.append(div);
ready
jQuery direct insert
for (var i = 0; i < 1000; i++) {
  var p = $('<p>');
  p.append('The quick brown fox jumps over the lazy dog');
  $test_area.append(p);
}
ready
jQuery direct insert & raw create
for (var i = 0; i < 1000; i++) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode('The quick brown fox jumps over the lazy dog'));
  $test_area.append(p);
}
ready

Revisions

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