jQuery .find() vs. context selector

JavaScript performance comparison

Revision 7 of this test case created

Info

comparing selector speed

Preparation code

<ul class="account-nav">
                                                <li class="myaccount" id="myaccount"><a href="#"><span>My Account</span></a></li>
                                                <li class="addressbook" id="addressbook"><a href="#"><span>Address Book</span></a></li>
                                                <li class="myreviews" id="myreviews"><a href="#"><span>My Reviews</span></a></li>
                                                <li class="loremipsum" id="loremipsum"><a href="#"><span>Lorem Ipsum</span></a></li>
                                                <li class="orderhistory" id="orderhistory"><a href="#"><span>Order History</span></a></li>
                                                <li class="discounts" id="discounts"><a href="#"><span>Discounts</span></a></li>
                                                <li class="tickets" id="tickets"><a href="#"><span>Help Tickets</span></a></li>
<li class="addressbook"><a href="#"><span>Address Book</span></a></li>


                                        </ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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
find method
 
$(".account-nav").find('#addressbook').addClass("active");
 pending…
context method
 
$('#addressbook').addClass("active");
 pending…
find using class
 
$('.addressbook').addClass("active");
 pending… 
$(".account-nav").find('.addressbook').addClass("active");
 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