jQuery lazyHandler performance comparison

JavaScript performance comparison

Test case created by Murat Çorlu

Preparation code

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
(function(c){var b={},a,d=function(f,e,g){if(!a){a=c(document)}if(!b[f]){a.bind(f,function(i){var k=i.target,h=c(k),j=b[f];c.each(j,function(l,m){if(h.is(m.s)){m.f.call(k,i)}else{h.parents(m.s).each(function(n){m.f.call(this,i)})}})});b[f]=[]}b[f].push({f:g,s:e})};c.lh=function(e){return{click:function(f){d("click",e,f)},bind:function(f,g){d(f,e,g)}}}})(jQuery);
</script>
<script>
function clicked() { alert("clicked!"); }
</script>
<style type="text/css">
.click {display:none;}
</style>
<a href="#click" class="click click1" id="click1">Click Me!</a> 
<a href="#click" class="click click2" id="click2">Click Me!</a> 
<a href="#click" class="click click3" id="click3">Click Me!</a> 
<a href="#click" class="click click4" id="click4">Click Me!</a> 
<a href="#click" class="click click5" id="click5">Click Me!</a> 
<a href="#click" class="click click6" id="click6">Click Me!</a> 
<a href="#click" class="click click7" id="click7">Click Me!</a> 
<a href="#click" class="click click8" id="click8">Click Me!</a> 
<a href="#click" class="click click9" id="click9">Click Me!</a> 
<a href="#click" class="click click10" id="click10">Click Me!</a> 
<a href="#click" class="click click11" id="click11">Click Me!</a> 
<a href="#click" class="click click12" id="click12">Click Me!</a> 
<a href="#click" class="click click13" id="click13">Click Me!</a> 
<a href="#click" class="click click14" id="click14">Click Me!</a> 
<a href="#click" class="click click15" id="click15">Click Me!</a> 
<a href="#click" class="click click16" id="click16">Click Me!</a> 
<a href="#click" class="click click17" id="click17">Click Me!</a> 
<a href="#click" class="click click18" id="click18">Click Me!</a> 
<a href="#click" class="click click19" id="click19">Click Me!</a> 
<a href="#click" class="click click20" id="click20">Click Me!</a> 
<a href="#click" class="click click21" id="click21">Click Me!</a> 
<a href="#click" class="click click22" id="click22">Click Me!</a> 
<a href="#click" class="click click23" id="click23">Click Me!</a> 
<a href="#click" class="click click24" id="click24">Click Me!</a> 
<a href="#click" class="click click25" id="click25">Click Me!</a> 
<a href="#click" class="click click26" id="click26">Click Me!</a> 
<a href="#click" class="click click27" id="click27">Click Me!</a> 
<a href="#click" class="click click28" id="click28">Click Me!</a> 
<a href="#click" class="click click29" id="click29">Click Me!</a> 
<a href="#click" class="click click30" id="click30">Click Me!</a> 
<a href="#click" class="click click31" id="click31">Click Me!</a> 
<a href="#click" class="click click32" id="click32">Click Me!</a> 
<a href="#click" class="click click33" id="click33">Click Me!</a> 
<a href="#click" class="click click34" id="click34">Click Me!</a> 
<a href="#click" class="click click35" id="click35">Click Me!</a> 
<a href="#click" class="click click36" id="click36">Click Me!</a> 
<a href="#click" class="click click37" id="click37">Click Me!</a> 
<a href="#click" class="click click38" id="click38">Click Me!</a> 
<a href="#click" class="click click39" id="click39">Click Me!</a> 
<a href="#click" class="click click40" id="click40">Click Me!</a> 
<a href="#click" class="click click41" id="click41">Click Me!</a> 
<a href="#click" class="click click42" id="click42">Click Me!</a> 
<a href="#click" class="click click43" id="click43">Click Me!</a> 
<a href="#click" class="click click44" id="click44">Click Me!</a> 
<a href="#click" class="click click45" id="click45">Click Me!</a> 
<a href="#click" class="click click46" id="click46">Click Me!</a> 
<a href="#click" class="click click47" id="click47">Click Me!</a> 
<a href="#click" class="click click48" id="click48">Click Me!</a> 
<a href="#click" class="click click49" id="click49">Click Me!</a> 
<a href="#click" class="click click50" id="click50">Click Me!</a> 
<a href="#click" class="click click51" id="click51">Click Me!</a> 
<a href="#click" class="click click52" id="click52">Click Me!</a> 
<a href="#click" class="click click53" id="click53">Click Me!</a> 
<a href="#click" class="click click54" id="click54">Click Me!</a> 
<a href="#click" class="click click55" id="click55">Click Me!</a> 
<a href="#click" class="click click56" id="click56">Click Me!</a> 
<a href="#click" class="click click57" id="click57">Click Me!</a> 
<a href="#click" class="click click58" id="click58">Click Me!</a> 
<a href="#click" class="click click59" id="click59">Click Me!</a> 
<a href="#click" class="click click60" id="click60">Click Me!</a> 
<a href="#click" class="click click61" id="click61">Click Me!</a> 
<a href="#click" class="click click62" id="click62">Click Me!</a> 
<a href="#click" class="click click63" id="click63">Click Me!</a> 
<a href="#click" class="click click64" id="click64">Click Me!</a> 
<a href="#click" class="click click65" id="click65">Click Me!</a> 
<a href="#click" class="click click66" id="click66">Click Me!</a> 
<a href="#click" class="click click67" id="click67">Click Me!</a> 
<a href="#click" class="click click68" id="click68">Click Me!</a> 
<a href="#click" class="click click69" id="click69">Click Me!</a> 
<a href="#click" class="click click70" id="click70">Click Me!</a> 
<a href="#click" class="click click71" id="click71">Click Me!</a> 
<a href="#click" class="click click72" id="click72">Click Me!</a> 
<a href="#click" class="click click73" id="click73">Click Me!</a> 
<a href="#click" class="click click74" id="click74">Click Me!</a> 
<a href="#click" class="click click75" id="click75">Click Me!</a> 
<a href="#click" class="click click76" id="click76">Click Me!</a> 
<a href="#click" class="click click77" id="click77">Click Me!</a> 
<a href="#click" class="click click78" id="click78">Click Me!</a> 
<a href="#click" class="click click79" id="click79">Click Me!</a> 
<a href="#click" class="click click80" id="click80">Click Me!</a> 
<a href="#click" class="click click81" id="click81">Click Me!</a> 
<a href="#click" class="click click82" id="click82">Click Me!</a> 
<a href="#click" class="click click83" id="click83">Click Me!</a> 
<a href="#click" class="click click84" id="click84">Click Me!</a> 
<a href="#click" class="click click85" id="click85">Click Me!</a> 
<a href="#click" class="click click86" id="click86">Click Me!</a> 
<a href="#click" class="click click87" id="click87">Click Me!</a> 
<a href="#click" class="click click88" id="click88">Click Me!</a> 
<a href="#click" class="click click89" id="click89">Click Me!</a> 
<a href="#click" class="click click90" id="click90">Click Me!</a> 
<a href="#click" class="click click91" id="click91">Click Me!</a> 
<a href="#click" class="click click92" id="click92">Click Me!</a> 
<a href="#click" class="click click93" id="click93">Click Me!</a> 
<a href="#click" class="click click94" id="click94">Click Me!</a> 
<a href="#click" class="click click95" id="click95">Click Me!</a> 
<a href="#click" class="click click96" id="click96">Click Me!</a> 
<a href="#click" class="click click97" id="click97">Click Me!</a> 
<a href="#click" class="click click98" id="click98">Click Me!</a> 
<a href="#click" class="click click99" id="click99">Click Me!</a> 
<a href="#click" class="click click100" id="click100">Click Me!</a> 
    

Preparation code output

<script> (function(c){var b={},a,d=function(f,e,g){if(!a){a=c(document)}if(!b[f]){a.bind(f,function(i){var k=i.target,h=c(k),j=b[f];c.each(j,function(l,m){if(h.is(m.s)){m.f.call(k,i)}else{h.parents(m.s).each(function(n){m.f.call(this,i)})}})});b[f]=[]}b[f].push({f:g,s:e})};c.lh=function(e){return{click:function(f){d("click",e,f)},bind:function(f,g){d(f,e,g)}}}})(jQuery); </script> <script> function clicked() { alert("clicked!"); } </script> <style type="text/css"> .click {display:none;} </style> <a href="#click" class="click click1" id="click1">Click Me!</a> <a href="#click" class="click click2" id="click2">Click Me!</a> <a href="#click" class="click click3" id="click3">Click Me!</a> <a href="#click" class="click click4" id="click4">Click Me!</a> <a href="#click" class="click click5" id="click5">Click Me!</a> <a href="#click" class="click click6" id="click6">Click Me!</a> <a href="#click" class="click click7" id="click7">Click Me!</a> <a href="#click" class="click click8" id="click8">Click Me!</a> <a href="#click" class="click click9" id="click9">Click Me!</a> <a href="#click" class="click click10" id="click10">Click Me!</a> <a href="#click" class="click click11" id="click11">Click Me!</a> <a href="#click" class="click click12" id="click12">Click Me!</a> <a href="#click" class="click click13" id="click13">Click Me!</a> <a href="#click" class="click click14" id="click14">Click Me!</a> <a href="#click" class="click click15" id="click15">Click Me!</a> <a href="#click" class="click click16" id="click16">Click Me!</a> <a href="#click" class="click click17" id="click17">Click Me!</a> <a href="#click" class="click click18" id="click18">Click Me!</a> <a href="#click" class="click click19" id="click19">Click Me!</a> <a href="#click" class="click click20" id="click20">Click Me!</a> <a href="#click" class="click click21" id="click21">Click Me!</a> <a href="#click" class="click click22" id="click22">Click Me!</a> <a href="#click" class="click click23" id="click23">Click Me!</a> <a href="#click" class="click click24" id="click24">Click Me!</a> <a href="#click" class="click click25" id="click25">Click Me!</a> <a href="#click" class="click click26" id="click26">Click Me!</a> <a href="#click" class="click click27" id="click27">Click Me!</a> <a href="#click" class="click click28" id="click28">Click Me!</a> <a href="#click" class="click click29" id="click29">Click Me!</a> <a href="#click" class="click click30" id="click30">Click Me!</a> <a href="#click" class="click click31" id="click31">Click Me!</a> <a href="#click" class="click click32" id="click32">Click Me!</a> <a href="#click" class="click click33" id="click33">Click Me!</a> <a href="#click" class="click click34" id="click34">Click Me!</a> <a href="#click" class="click click35" id="click35">Click Me!</a> <a href="#click" class="click click36" id="click36">Click Me!</a> <a href="#click" class="click click37" id="click37">Click Me!</a> <a href="#click" class="click click38" id="click38">Click Me!</a> <a href="#click" class="click click39" id="click39">Click Me!</a> <a href="#click" class="click click40" id="click40">Click Me!</a> <a href="#click" class="click click41" id="click41">Click Me!</a> <a href="#click" class="click click42" id="click42">Click Me!</a> <a href="#click" class="click click43" id="click43">Click Me!</a> <a href="#click" class="click click44" id="click44">Click Me!</a> <a href="#click" class="click click45" id="click45">Click Me!</a> <a href="#click" class="click click46" id="click46">Click Me!</a> <a href="#click" class="click click47" id="click47">Click Me!</a> <a href="#click" class="click click48" id="click48">Click Me!</a> <a href="#click" class="click click49" id="click49">Click Me!</a> <a href="#click" class="click click50" id="click50">Click Me!</a> <a href="#click" class="click click51" id="click51">Click Me!</a> <a href="#click" class="click click52" id="click52">Click Me!</a> <a href="#click" class="click click53" id="click53">Click Me!</a> <a href="#click" class="click click54" id="click54">Click Me!</a> <a href="#click" class="click click55" id="click55">Click Me!</a> <a href="#click" class="click click56" id="click56">Click Me!</a> <a href="#click" class="click click57" id="click57">Click Me!</a> <a href="#click" class="click click58" id="click58">Click Me!</a> <a href="#click" class="click click59" id="click59">Click Me!</a> <a href="#click" class="click click60" id="click60">Click Me!</a> <a href="#click" class="click click61" id="click61">Click Me!</a> <a href="#click" class="click click62" id="click62">Click Me!</a> <a href="#click" class="click click63" id="click63">Click Me!</a> <a href="#click" class="click click64" id="click64">Click Me!</a> <a href="#click" class="click click65" id="click65">Click Me!</a> <a href="#click" class="click click66" id="click66">Click Me!</a> <a href="#click" class="click click67" id="click67">Click Me!</a> <a href="#click" class="click click68" id="click68">Click Me!</a> <a href="#click" class="click click69" id="click69">Click Me!</a> <a href="#click" class="click click70" id="click70">Click Me!</a> <a href="#click" class="click click71" id="click71">Click Me!</a> <a href="#click" class="click click72" id="click72">Click Me!</a> <a href="#click" class="click click73" id="click73">Click Me!</a> <a href="#click" class="click click74" id="click74">Click Me!</a> <a href="#click" class="click click75" id="click75">Click Me!</a> <a href="#click" class="click click76" id="click76">Click Me!</a> <a href="#click" class="click click77" id="click77">Click Me!</a> <a href="#click" class="click click78" id="click78">Click Me!</a> <a href="#click" class="click click79" id="click79">Click Me!</a> <a href="#click" class="click click80" id="click80">Click Me!</a> <a href="#click" class="click click81" id="click81">Click Me!</a> <a href="#click" class="click click82" id="click82">Click Me!</a> <a href="#click" class="click click83" id="click83">Click Me!</a> <a href="#click" class="click click84" id="click84">Click Me!</a> <a href="#click" class="click click85" id="click85">Click Me!</a> <a href="#click" class="click click86" id="click86">Click Me!</a> <a href="#click" class="click click87" id="click87">Click Me!</a> <a href="#click" class="click click88" id="click88">Click Me!</a> <a href="#click" class="click click89" id="click89">Click Me!</a> <a href="#click" class="click click90" id="click90">Click Me!</a> <a href="#click" class="click click91" id="click91">Click Me!</a> <a href="#click" class="click click92" id="click92">Click Me!</a> <a href="#click" class="click click93" id="click93">Click Me!</a> <a href="#click" class="click click94" id="click94">Click Me!</a> <a href="#click" class="click click95" id="click95">Click Me!</a> <a href="#click" class="click click96" id="click96">Click Me!</a> <a href="#click" class="click click97" id="click97">Click Me!</a> <a href="#click" class="click click98" id="click98">Click Me!</a> <a href="#click" class="click click99" id="click99">Click Me!</a> <a href="#click" class="click click100" id="click100">Click Me!</a>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
class selector
$('.click').click(clicked);
pending…
class selector with for loop
for (var i = 1; i <= 100; i++) {
  $('.click' + i).click(clicked);
}
pending…
tag selector
$('a').click(clicked);
pending…
id selector with for loop
for (var i = 1; i <= 100; i++) {
  $('#click' + i).click(clicked);
}
pending…
lazyHandler
$.lh('.click').click(clicked);
pending…
lazyHandler with for loop
for (var i = 1; i <= 100; i++) {
  $.lh('.click' + i).click(clicked);
}
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.

0 Comments

Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me! Click Me!