jQuery Selector Perf - Check different selectors

JavaScript performance comparison

Revision 83 of this test case created by

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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    

Preparation code output

<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>

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
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.

0 Comments

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