live-vs-on

JavaScript performance comparison

Test case created by Antti Ahti

Info

Comparison of jQuery live() and on() methods when binding to the same event on multiple elements.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
<script>
  Benchmark.prototype.setup = function() {
    var update = function(e) {
        $(this).html('foo');
        }
  };
</script>

Preparation code output

  • one
  • two
  • three
  • four
  • five
  • six
  • seven
  • eight
  • nine
  • ten

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
live()
 
$('ul li').live('click', update);
 pending…
on
 
$('ul').on('click', 'li', update);
 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:

1 comment

Sam commented : ∞

Thanks for this!

Add a comment