jQuery delegate vs bind triggering (v16)

Revision 16 of this benchmark created by Steve on

Preparation HTML

<div id="extra-dom-content-direct-bind">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
</div>

<div id="extra-dom-content-delegate">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
bind
var $nav1 = $('#extra-dom-content-direct-bind');
var $links = $nav1.find('a');

$links.on('click', function(e) {
    e.preventDefault();
});

// attempting to compensate for delegate's up front binding savings
// by doing a crapload of clicks
for (var i = 0; i <= 100; i++) {
 $links.trigger('click');
}
ready
delegate
var $nav2 = $('#extra-dom-content-delegate');
var $links = $nav2.find('a');

$nav2.on('click', 'a', function(e) {
    e.preventDefault();
});

// attempting to compensate for delegate's up front binding savings
// by doing a crapload of clicks
for (var i = 0; i <= 100; i++) {
 $links.trigger('click');
}
ready

Revisions

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