jQuery Find Vs Sizzle (v3)

Revision 3 of this benchmark created by Adam Bankin on

Description

Testing some different methods of selecting elements in jQuery.

Preparation HTML

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

<div id="outer">
  <div id="inner" class="something">

  </div>
</div>
<script>
  var outer = document.getElementById('outer');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Sizzle
// $('#outer #inner'); this is jQuery, not Sizzle
$.find('#outer #inner') // $.find is the exposed interface for Sizzle
ready
jQuery Object's .find methodind
$('#outer').find('#inner'); // jQuery's .find method
ready
jQuery with String context
$('#inner', '#outer') // creates #outer as a jQuery Object first
ready
jQuery with pre-found HTMLElement context
$('#inner', outer) // outer was defined earlier
ready
Sizzle with pre-found HTMLElement
$.find('#inner', outer)
ready

Revisions

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

  • Revision 1: published by Steven Hall on
  • Revision 2: published by Timmy Willison on
  • Revision 3: published by Adam Bankin on
  • Revision 4: published on
  • Revision 6: published on