jQuery body .on() VS jQuery document .on()

JavaScript performance comparison

Test case created by Maryk

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="myDiv">
</div>
<script>
  var listArray = [],
      tpl = '	<p class="element" id="check_%i"></p>',
      tplFn = function(value) {
      return tpl.replace(/%i/g, value);
      },
      i;

  // loop and create 1000 entries
  for (i = 0; i <= 1000; i++) {
    listArray.push(tplFn(i));
  }


  $('#myDiv').append(listArray.join(''));
</script>
    

Preparation code output

<div id="myDiv"> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
.On() with id
$('#myDiv').on('click', '.element', $.noop);
pending…
.On() with document
$(document).on('click', '.element', $.noop);
pending…
.On() with document.body
$(document.body).on('click', '.element', $.noop);
pending…
.On() with jQuery body
$('body').on('click', '.element', $.noop);
pending…

Compare results of other browsers

Revisions

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

0 Comments