JavaScript vs. jQuery clone node (v2)

Revision 2 of this benchmark created on

Description

Performance benchmark between JavaScript's cloneNode and jQuery clone() inside an event binding.

Preparation HTML

<ul id="foo">
        <li>baz</li>
</ul>

<a id="bar" href="#">xxx</a>

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

Test runner

Ready to run.

Testing in
TestOps/sec
JavaScript
(function() {
  var btn = document.getElementById('bar');

  function clone(event) {
    var list = document.getElementById('foo');

    list.appendChild(list.getElementsByTagName('li')[0].cloneNode(true));
  }

  btn.addEventListener('click', clone, false);
});
ready
jQuery
(function() {
  $('#bar').bind('click', function(e) {
    var $list = $('#foo');
    e.preventDefault();
    $list.find('li:eq(0)').clone().appendTo($list);
  })
});
ready

Revisions

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