jQuery Selector Perf - Check different selectors

JavaScript performance comparison

Revision 83 of this test case created

Preparation code

<div id="step1" class="step ">
                                                <div class="instructions">Choose an option in the steps before this one to get a choice</div>
                                                                                                        <select id="filter_0" class="filter">
                                                                <option value="">--- Select an option ---</option>
                                                                                                                                        <option value="77">Argentinia</option>

                                                                                                                                        <option value="78">Brazil</option>
                                                                                                                                        <option value="79">Chile</option>
                                                                                                                                        <option value="81">Ecuador</option>
                                                                                                                                        <option value="80">Uruguay</option>
                                                                                                                        </select>
                                                                                        </div>
                                                                        <div id="step2" class="step ">

                                                <div class="instructions">Choose an option in the steps before this one to get a choice</div>
                                                                                                        <select id="filter_77" class="filter">
                                                                <option value="">--- Select an option ---</option>
                                                                                                                                        <option value="82">Catamarca</option>
                                                                                                                                        <option value="83">Chaco</option>
                                                                                                                                        <option value="84">Chubut</option>

                                                                                                                                        <option value="85">Córdoba</option>
                                                                                                                                        <option value="86">Corrientes</option>
                                                                                                                                        <option value="87">Entre Ríos</option>
                                                                                                                                        <option value="88">Formosa</option>
                                                                                                                        </select>
                                                                                                        <select id="filter_78" class="filter">
                                                                <option value="">--- Select an option ---</option>

                                                                                                                                        <option value="89">Acre</option>
                                                                                                                                        <option value="90">Alagoas</option>
                                                                                                                                        <option value="91">Amapá</option>
                                                                                                                                        <option value="92">Amazonas</option>
                                                                                                                        </select>
                                                                                                        <select id="filter_79" class="filter">
                                                                <option value="">--- Select an option ---</option>

                                                                                                                                        <option value="95">Antofagasta</option>
                                                                                                                                        <option value="96">Atacama</option>
                                                                                                                                        <option value="93">Arica and Parinacota</option>
                                                                                                                                        <option value="94">Tarapacá</option>
                                                                                                                        </select>
                                                                                                        <select id="filter_81" class="filter">
                                                                <option value="">--- Select an option ---</option>

                                                                                                                                        <option value="97">Azuay</option>
                                                                                                                                        <option value="98">Bolivar</option>
                                                                                                                                        <option value="99">Cañar</option>
                                                                                                                        </select>
                                                                                                        <select id="filter_80" class="filter">
                                                                <option value="">--- Select an option ---</option>
                                                                                                                                        <option value="100">Artigas</option>

                                                                                                                                        <option value="101">Canelones</option>
                                                                                                                                        <option value="102">Cerro Largo</option>
                                                                                                                        </select>
                                                                                        </div>
                                                                        <div id="step3" class="step ">
                                                <div class="instructions">Choose an option in the steps before this one to get a choice</div>
                                                                                                        <select id="filter_82" class="filter">

                                                                <option value="">--- Select an option ---</option>
                                                                                                                                        <option value="103">San Fernando</option>
                                                                                                                        </select>
                                                                                        </div>
                                
                                <div id="step4" class="step">
                                        <div id="filter_tags" class="filter">

                                        </div>

                                        <div id="filter_hotel" class="filter">

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

Preparation code output

Choose an option in the steps before this one to get a choice
Choose an option in the steps before this one to get a choice
Choose an option in the steps before this one to get a choice

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Class Selector
 
$('.filter');
 pending…
Tag + class selector
 
$('select.filter')
 pending…
.class Selector + limit tag
 
$('.step:not(select)')
 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