.live() @ handling

JavaScript performance comparison

Revision 18 of this test case created by Mohammad Salehe

Info

The original "jQuery .live() vs .delegate() vs .on()" test doesn't measure event handling performance of these functions. It is more trying to benchmark selectors and attaching event handlers to different elements.

In real life usage, events handlers are attached once and event are fired many, so it is more important to benchmark handling performance.

These tests try to do so by attaching handlers in different ways at first and then measuring click fire event performance.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<div id="context">
  <p>
    Some paragraph
  </p>
  <a> Some Link! </a>
</div>
<script>
Benchmark.prototype.setup = function() {
    the_p = $("#context p");
   
    //$('p').live('click', $.noop);
    //$('a').live('click', $.noop);
   
    //$('p', $('#context')).live('click', $.noop);
    //$('a', $('#context')).live('click', $.noop);
   
    //$('#context').delegate('p', 'click', $.noop);
    //$('#context').delegate('a', 'click', $.noop);
   
    //$(document).delegate('p', 'click', $.noop);
    //$(document).delegate('a', 'click', $.noop);
   
    //$('#context').on('click', 'p', $.noop);
    //$('#context').on('click', 'a', $.noop);
   
    //$(document).on('click', 'p', $.noop);
    //$(document).on('click', 'a', $.noop);
   
    $("#context p").on('click', $.noop);
    $("#context a").on('click', $.noop);
};
</script>

Preparation code output

Some paragraph

Some Link!

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
click test
the_p.click()
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment