appendChild vs jQuery.append

Benchmark created by Baylor Rae' on

Description

This tests the speed of appendChild vs jQuery.append

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="random-stuff" style="display: none"></ul>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery (appendTo)
el = jQuery('#random-stuff');

(function(array) {
  array.forEach(function(item) {
    $('<li />', {
      text: item
    }).appendTo(el);
  });
})('random items that I through in this list to test'.split(' '));
ready
jQuery (append)
el = jQuery('#random-stuff');
docFrag = document.createDocumentFragment();

(function(array) {
  array.forEach(function(item) {
    item = $('<li />', {
      text: item
    })[0];

    docFrag.appendChild(item);
  });

  el.append(docFrag);
})('random items that I through in this list to test'.split(' '));
ready
No jQuery
el = document.getElementById('random-stuff');
docFrag = document.createDocumentFragment();

(function(array) {
  array.forEach(function(item) {
    item = $('<li />', {
      text: item
    })[0];

    docFrag.appendChild(item);
  });

  el.appendChild(docFrag);
})('random items that I through in this list to test'.split(' '));
ready

Revisions

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

  • Revision 1: published by Baylor Rae' on