jQuery .live() vs .delegate() vs .on()

JavaScript performance comparison

Revision 9 of this test case created on 8th February 2012

Preparation code

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

<div id="context">
<div><div><div><div><div><div><div><div>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<p>Some paragraph</p>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<div class='nest'><p>Some paragraph</p></div>
<p>Some paragraph</p>
<p>Some paragraph</p>
</div></div></div></div></div></div></div></div>
</div>

Preparation code output

Some paragraph

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()	`$('p').live('click', $.noop);`	pending…
.live() with context	`$('p', $('#context')).live('click', $.noop);`	pending…
.delegate()	`$('#context').delegate('p', 'click', $.noop);`	pending…
.delegate() on document	`$(document).delegate('p', 'click', $.noop);`	pending…
.on()	`$('#context').on('click', 'p', $.noop);`	pending…
.on() on document	`$(document).on('click', 'p', $.noop);`	pending…
document .nest p	`$(document).on('click', '.nest> p', $.noop);`	pending…
#context .nest p	`$('#context').on('click', '.nest> p', $.noop);`	pending…
.nest p	`$('.nest').on('click', 'p', $.noop);`	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:

Revision 1: published by PeeHaa on 17th December 2011
Revision 2: published on 17th December 2011
Revision 4: published by maru on 4th January 2012
Revision 5: published by Andrew Smith on 4th January 2012
Revision 6: published on 10th January 2012
Revision 7: published on 12th January 2012
Revision 8: published on 8th February 2012
Revision 9: published on 8th February 2012
Revision 10: published on 8th February 2012
Revision 11: published on 24th February 2012
Revision 12: published by Jonathan on 24th February 2012
Revision 13: published on 8th March 2012
Revision 14: published on 14th March 2012
Revision 15: published on 14th March 2012
Revision 16: published by Luis Lobo Borobia on 18th March 2012
Revision 17: published on 13th April 2012
Revision 18: published by Mohammad Salehe on 8th May 2012
Revision 19: published by nicolas on 10th May 2012
Revision 20: published by nicolas on 10th May 2012
Revision 21: published by nicolas on 10th May 2012
Revision 22: published by nicolas on 10th May 2012
Revision 23: published on 16th June 2012
Revision 25: published on 1st August 2012
Revision 26: published by pcmanik on 1st August 2012
Revision 28: published by German on 9th August 2012
Revision 29: published by Jonas Grimfelt on 16th August 2012
Revision 30: published by tyareg on 21st August 2012
Revision 31: published by remrem on 30th August 2012
Revision 32: published on 11th September 2012
Revision 33: published on 11th September 2012
Revision 34: published on 14th September 2012
Revision 35: published by 2123959 on 14th September 2012
Revision 37: published by Bruno Bernardino on 3rd October 2012
Revision 38: published on 27th October 2012
Revision 39: published on 11th December 2012
Revision 41: published on 19th January 2013
Revision 42: published on 19th January 2013
Revision 43: published by Yogendra Gautam on 27th February 2013
Revision 44: published by Hamed Al-Khabaz on 1st March 2013
Revision 46: published by Colin McLeod on 19th March 2013
Revision 47: published on 29th March 2013
Revision 48: published on 30th March 2013
Revision 49: published on 11th April 2013
Revision 51: published on 16th April 2013
Revision 52: published on 22nd April 2013
Revision 53: published by Jan Klat on 14th May 2013