jquery scoped vs non-scoped

JavaScript performance comparison

Revision 2 of this test case created by dan

Preparation code

<div id="apple">
  <div class="red">
  Red Apple
  </div>
  <div class="red big">
  Big Red Apple
  </div>
  <div class="green">
  Green Apple
  </div>
</div>

<div id="ferrari">
  <div class="red">
  Red Ferrari
  </div>
  <div class="red big">
  Big Red Ferrari
  </div>
  <div class="gray">
  Gray Ferrari
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var $el = $('#ferrari'),
         el = document.getElementById('ferrari'),
        $targ = $('.red');
};
</script>

Preparation code output

Red Apple
Big Red Apple
Green Apple
Red Ferrari
Big Red Ferrari
Gray Ferrari

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
scoped
$('.red','#ferrari').hide();
pending…
parent children
$('#ferrari .red').hide();
pending…
parent > child
$('#ferrari > .red').hide();
pending…
find
$('#ferrari').find('.red').hide();
pending…
cached find
$el.find('.red').hide();
pending…
scoped node
$('.red',$el[0]).hide();
pending…
cached node: find
$($el[0]).find('.red').hide();
pending…
raw find
$( document.getElementById('ferrari') ).find('.red').hide();
pending…
cached raw: find
$( el ).find('.red').hide();
pending…
cached raw: scoped
$( '.red', el ).hide();
pending…
cached scope and target: find
$el.find($targ).hide();
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. Here’s a list of current revisions for this page:

0 comments

Add a comment