jQuery.live vs jQuery.delegate (v21)

Revision 21 of this benchmark created by Jesse on

Description

comparison of jQuery methods live and delegate over 1000 item.

Edited to changed the query selector to use class instead of input:checkbox and replaced ul id to class.

Basically showing that this test is more about query selector performance

Should be noted theres no testing of the performance between actual event handling.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<ul class="myList">
</ul>

<script>
  var listArray = [],
      tpl = '<li><input class="checkbox" type="checkbox" name="check_%i" value="%i" /></li>',
      tplFn = function(value) {
    return tpl.replace(/%i/g, value);
      },
      i;
  
  // loop and create 1000 entries
  for (i = 0; i <= 1000; i++) {
   listArray.push(tFpln(i));
  }
  
  
  $('.myList').append(listArray.join(''));
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
live
$('.checkbox').live('click', $.noop);
ready
live with context
$('.checkbox', $('.myList')).live('click', $.noop);
ready
delegate
$('.myList').delegate('.checkbox', 'click', $.noop);
ready

Revisions

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