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

Revision 113 of this benchmark created by Miles on


Description

comparing selector speed

Preparation HTML

<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>

Setup

var $wrap = $('.wrap');

Test runner

Ready to run.

Testing in
TestOps/sec
find method (node context)
var $items = $($wrap[0]).find('.list2 .item');
ready
find method (jquery context)
var $items = $wrap.find('.list2 .item');
ready
context node
var $items = $('.list2 .item', $wrap[0]);
ready
context jquery
var $items = $('.list2 .item', $wrap);
ready
find nested class
var $items = $wrap.find('.list2 .item');
ready
find find class
var $items = $wrap.find('.list2').find('.item');
ready
fint nested tag
var $items = $wrap.find('.list2 a');
ready
find class find tag
var $items = $wrap.find('.list2').find('a');
ready

Revisions

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