jQuery descendant selector vs child selector vs find

Benchmark created by Hiromu Hasegawa on

Description

Check jQuery descendant selector and .find() performance

Preparation HTML

<ul class="foo">
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
  <li class="bar"><a href="#">baz</a></li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Descendant Selector
$('.foo a')
ready
Descendant Selector ( li )
$('.bar a')
ready
Child Selector ( li )
$('.bar > a')
ready
.find()
$('.foo').find('a')
ready
.find() ( li )
$('.bar').find('a')
ready
.find() ( li > a )
$('.bar').find('> a')
ready
.children()
$('.bar').children('a')
ready
querySelectorAll (jQuery object)
$(document.querySelectorAll('.foo a'))
ready
querySelectorAll (jQuery object & li )
$(document.querySelectorAll('.bar a'))
ready
querySelectorAll (jQuery object & li > a )
$(document.querySelectorAll('.bar > a'))
ready

Revisions

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

  • Revision 1: published by Hiromu Hasegawa on