jQuery event delegation on table with links

JavaScript performance comparison

Test case created by Pankratios

Info

Comparing performance of adding .click() to 50 link tags with class selector in table cells vs using .on() to listen for click events bubbling up the DOM tree.

Preparation code

<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
      <a class="thelink"></a>
    </td>
  </tr>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
  </script>
</table>

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
no delegation
$('.thelink').on('click', function() {
  $(this).toggleClass('active');
});
pending…
with delegation
$('table').on('click', 'a.thelink', function() {
  $(this).toggleClass('active');
});
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

Comment form temporarily disabled.

Add a comment