jQuery selector specificity vs jquery find

JavaScript performance comparison

Revision 5 of this test case created by Jared Williams

Preparation code

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

<div id="foobar">
  <h1>title</h1>
  <div id="menu">
    <ol>
      <li>home</li>
      <li><b>magic man</b></li>
    </ol>
  </div>
  <div id="sidebar" style="background-color: green;">
    <form action="mew">
      <p><input class="test" type="hidden" name="session_id"></p>
    </form>
    <div class="bar">
      A list of two follows
      <ul>
        <li zap="2" class="foo">one</li>
        <li>two</li>
      </ul>
    </div>
  </div>
</div>
    

Preparation code output

<div id="foobar"> <h1>title</h1> <div id="menu"> <ol> <li>home</li> <li><b>magic man</b></li> </ol> </div> <div id="sidebar" style="background-color: green;"> <form action="mew"> <p><input class="test" type="hidden" name="session_id"></p> </form> <div class="bar"> A list of two follows <ul> <li zap="2" class="foo">one</li> <li>two</li> </ul> </div> </div> </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
Selector Specificity
$('#sidebar .test');
pending…
Find
$('#foobar .bar .foo');
pending…
Find on all
$('#foobar').find('.bar .foo');
pending…
Find within context
$('.test', '#sidebar');
pending…
getElementById().getByTagName()
document.getElementById('sidebar').getElementsByTagName('p');
pending…
querySelectorAll()
document.querySelectorAll('#sidebar .test');
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

title