jQuery Selectors vs Find (v16)

Revision 16 of this benchmark created on

Preparation HTML

<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/1/jquery.min.js"></script>

Setup

var $list = $('#list');

Test runner

Ready to run.

Testing in
TestOps/sec
selectors
var $test1 = $('.test1'),
    $test2 = $('.test2'),
    $test3 = $('.test3'),
    $test4 = $('.test4'),
    $test5 = $('.test5');
ready
find
var $test1 = $list.find('.test1'),
    $test2 = $list.find('.test2'),
    $test3 = $list.find('.test3'),
    $test4 = $list.find('.test4'),
    $test5 = $list.find('.test5');
ready
#id class
var $test1 = $('#list .test1'),
    $test2 = $('#list .test2'),
    $test3 = $('#list .test3'),
    $test4 = $('#list .test4'),
    $test5 = $('#list .test5');
ready
with tags
var $test1 = $('#list li.test1'),
    $test2 = $('#list li.test2'),
    $test3 = $('#list li.test3'),
    $test4 = $('#list li.test4'),
    $test5 = $('#list li.test5');
ready
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');
ready
children
var $test1 = $list.children('.test1'),
    $test2 = $list.children('.test2'),
    $test3 = $list.children('.test3'),
    $test4 = $list.children('.test4'),
    $test5 = $list.children('.test5');
ready

Revisions

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