Delegate Document vs Element

JavaScript performance comparison

Test case created by Steven Weathers

Preparation code

<div id="test-parent1" class="test-parent">
  <div id="test-child1" class="test-child">
    <div class="test-grandchild"></div>
  </div>
  <div id="test-child2" class="test-child"></div>
  <div id="test-child3" class="test-child"></div>
  <div id="test-child3" class="test-child"></div>
</div>
<div id="test-parent2" class="test-parent">
  <div id="test-child1" class="test-child">
    <div class="test-grandchild"></div>
  </div>
  <div id="test-child2" class="test-child"></div>
  <div id="test-child3" class="test-child"></div>
  <div id="test-child3" class="test-child"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  Benchmark.prototype.setup = function() {
    var $testParent = $('#test-parent1')
    $testParents = $('.test-parent');
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Delegate Document
 
$(document).delegate('#test-parent1 .test-child','click',function(){
    $(this).addClass('clicked');
});
 pending…
Delegate Element
 
$('#test-parent1').delegate('.test-child','click',function(){
    $(this).addClass('clicked');
});
 pending…
Delegate Element Cached
 
$testParent.delegate('.test-child','click',function(){
    $(this).addClass('clicked');
});
 pending…
Delegate Elements
 
$('.test-parent').delegate('.test-child','click',function(){
    $(this).addClass('clicked');
});
 pending…
Delegate Elements Cached
 
$testParents.delegate('.test-child','click',function(){
    $(this).addClass('clicked');
});
 pending…
Document Multi Delegate
 
$(document).delegate('.test-parent .test-child','click',function(){
    $(this).addClass('clicked');
});
$(document).delegate('.test-parent .test-grandchild','click',function(){
    $(this).addClass('clicked');
});
 pending…
Element Multi Delegate
 
$testParent.delegate('.test-child','click',function(){
    $(this).addClass('clicked');
});
$testParent.delegate('.test-grandchild','click',function(){
    $(this).addClass('clicked');
});
 pending…
Document Elements Delegate
 
$(document).delegate('.test-parent .test-child','click',function(){
    $(this).addClass('clicked');
});
 pending…

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

Compare results of other browsers

0 comments

Add a comment