Click, Live, Bind, Delegate with and withour class

Benchmark created by Shaun Baker on

Preparation HTML

<div id="extra-dom-content">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>
<a href="#">Home</a>
<ul id="nav">
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
  <li>
    <a href="#" class="anchor">Home</a>
  </li>
  <li>
    <a href="#" class="anchor">About</a>
  </li>
  <li>
    <a href="#" class="anchor">Blog</a>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Bind Class
$('.anchor').bind('click', function(e) {
  e.preventDefault();
});
ready
Bind A
$('#nav a').bind('click', function(e) {
 e.preventDefault();
});
ready
Click Class
$('.anchor').click(function(e) {
  e.preventDefault();
});
ready
Click A
$('#nav a').click(function(e) {
  e.preventDefault();
});
ready
Delegate
$('#nav').delegate('a', 'click', function(e) {
 e.preventDefault();
});
ready
Live A
$('#nav a').live('click', function(e) {
 e.preventDefault();
});
ready
Live Class
$('.anchor').live('click', function(e) {
 e.preventDefault();
});
ready
Each A
$('#nav').each(function() {
 $('a', this).live('click', function(e) {
  e.preventDefault();
 });
});
ready
Each Class
$('#nav').each(function() {
 $('.anchor', this).live('click', function(e) {
  e.preventDefault();
 });
});
ready

Revisions

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

  • Revision 1: published by Shaun Baker on