jQuery Selectors vs Find

JavaScript performance comparison

Revision 31 of this test case created

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="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var $list = $('#list');
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
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…
li with class
var $test1 = $('li.test1'),
    $test2 = $('li.test2'),
    $test3 = $('li.test3'),
    $test4 = $('li.test4'),
    $test5 = $('li.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. Here’s a list of current revisions for this page:

0 comments

Add a comment