jQuery .find() vs. context selector vs non-context selector

JavaScript performance comparison

Revision 113 of this test case created by Miles

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="wrap">
  <div class="list1">
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
  </div>
  <div class="list2">
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
    <a href="" class="item"></a>
  </div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var $wrap = $('.wrap');

};
</script>

Preparation code output

<div class="wrap"> <div class="list1"> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> </div> <div class="list2"> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> <a href="" class="item"></a> </div> </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
find method (node context)
var $items = $($wrap[0]).find('.list2 .item');
pending…
find method (jquery context)
var $items = $wrap.find('.list2 .item');
pending…
context node
var $items = $('.list2 .item', $wrap[0]);
pending…
context jquery
var $items = $('.list2 .item', $wrap);
pending…
find nested class
var $items = $wrap.find('.list2 .item');
pending…
find find class
var $items = $wrap.find('.list2').find('.item');
pending…
fint nested tag
var $items = $wrap.find('.list2 a');
pending…
find class find tag
var $items = $wrap.find('.list2').find('a');
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