document.on vs element.on

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<div id="page">
  <div class="container">
    <div class="box">
      <div class="test-box">
        <a href="#" class="link">Test</a>
      </div>
    </div>
  </div>
</div>
<script>
Benchmark.prototype.setup = function() {
    var $doc = $(document);
};
</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
document.on
$(document).on('ready', function() {

  $(document).on('click', '.link', function(e) {
    e.preventDefault()
  });
});
pending…
element.on
$(document).on('ready', function() {

  $('.link').on('click', function(e) {
    e.preventDefault()
  });
});
pending…
cached document
$(document).on('ready', function() {

  $doc.on('click', '.link', function(e) {
    e.preventDefault()
  });
});
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