jQuery Selectors vs Find

JavaScript performance comparison

Revision 32 of this test case created by

Preparation code

<div>
  <ul id="list">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list1">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list2">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list3">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list4">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list5">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list6">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list7">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list8">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
  <ul id="list9">
    <li class="test test1"></li>
    <li class="test test2"></li>
    <li class="test test3"></li>
    <li class="test test4"></li>
    <li class="test test5"></li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var $list = $('#list');
  var $li = $('li');

};
</script>

Preparation code output

<div> <ul id="list"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list1"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list2"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list3"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list4"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list5"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list6"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list7"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list8"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> <ul id="list9"> <li class="test test1"></li> <li class="test test2"></li> <li class="test test3"></li> <li class="test test4"></li> <li class="test test5"></li> </ul> </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
cached tags with find
var $test1 = $li.find('.test1'),
    $test2 = $li.find('.test2'),
    $test3 = $li.find('.test3'),
    $test4 = $li.find('.test4'),
    $test5 = $li.find('.test5');
pending…
selectors
var $test1 = $('.test1'),
    $test2 = $('.test2'),
    $test3 = $('.test3'),
    $test4 = $('.test4'),
    $test5 = $('.test5');
pending…
find
var $test1 = $list.find('.test1'),
    $test2 = $list.find('.test2'),
    $test3 = $list.find('.test3'),
    $test4 = $list.find('.test4'),
    $test5 = $list.find('.test5');
pending…
#id class
var $test1 = $('#list .test1'),
    $test2 = $('#list .test2'),
    $test3 = $('#list .test3'),
    $test4 = $('#list .test4'),
    $test5 = $('#list .test5');
pending…
with tags
var $test1 = $('#list li.test1'),
    $test2 = $('#list li.test2'),
    $test3 = $('#list li.test3'),
    $test4 = $('#list li.test4'),
    $test5 = $('#list li.test5');
pending…
Find with tags
var $test1 = $list.find('li.test1'),
    $test2 = $list.find('li.test2'),
    $test3 = $list.find('li.test3'),
    $test4 = $list.find('li.test4'),
    $test5 = $list.find('li.test5');
pending…
tags selector
var $test1 = $('li.test1'),
    $test2 = $('li.test2'),
    $test3 = $('li.test3'),
    $test4 = $('li.test4'),
    $test5 = $('li.test5');
pending…
tags with find
var $test1 = $('li').find('.test1'),
    $test2 = $('li').find('.test2'),
    $test3 = $('li').find('.test3'),
    $test4 = $('li').find('.test4'),
    $test5 = $('li').find('.test5');
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