JavaScript vs. jQuery clone node

Benchmark created by Frank Parent 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="https://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.