jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

jQuery: input[name] vs. multiple #id selectors (v3)

Revision 3 of this benchmark created by steve on October 4, 2011

Description

Test to see if it's faster to use input[name] to select multiple inputs vs selecting each input by id. I have also added 200 hidden input fields.

Preparation HTML

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

<fieldset id="radios1">
<legend>My Radios Group 1</legend>
<input type="radio" name="myRadio1" value="1" id="myRadio1_1" /> One<br />
<input type="radio" name="myRadio1" value="2" id="myRadio1_2" /> Two<br />
</fieldset>

<fieldset id="radios2">
<legend>My Radios Group 2</legend>
<input type="radio" name="myRadio2" value="1" id="myRadio2_1" /> One<br />
<input type="radio" name="myRadio2" value="2" id="myRadio2_2" /> Two<br />
<input type="radio" name="myRadio2" value="3" id="myRadio2_3" /> Three<br />
<input type="radio" name="myRadio2" value="4" id="myRadio2_4" /> Four<br />
<input type="radio" name="myRadio2" value="5" id="myRadio2_5" /> Five<br />
<input type="radio" name="myRadio2" value="6" id="myRadio2_6" /> Six<br />
<input type="radio" name="myRadio2" value="7" id="myRadio2_7" /> Seven<br />
<input type="radio" name="myRadio2" value="8" id="myRadio2_8" /> Eight<br />
<input type="radio" name="myRadio2" value="9" id="myRadio2_9" /> Nine<br />
<input type="radio" name="myRadio2" value="10" id="myRadio2_10" /> Ten<br />
</fieldset>

<input type="hidden" name="input0" id="input0" />
<input type="hidden" name="input1" id="input1" />
<input type="hidden" name="input2" id="input2" />
<input type="hidden" name="input3" id="input3" />
<input type="hidden" name="input4" id="input4" />
<input type="hidden" name="input5" id="input5" />
<input type="hidden" name="input6" id="input6" />
<input type="hidden" name="input7" id="input7" />
<input type="hidden" name="input8" id="input8" />
<input type="hidden" name="input9" id="input9" />
<input type="hidden" name="input10" id="input10" />
<input type="hidden" name="input11" id="input11" />
<input type="hidden" name="input12" id="input12" />
<input type="hidden" name="input13" id="input13" />
<input type="hidden" name="input14" id="input14" />
<input type="hidden" name="input15" id="input15" />
<input type="hidden" name="input16" id="input16" />
<input type="hidden" name="input17" id="input17" />
<input type="hidden" name="input18" id="input18" />
<input type="hidden" name="input19" id="input19" />
<input type="hidden" name="input20" id="input20" />
<input type="hidden" name="input21" id="input21" />
<input type="hidden" name="input22" id="input22" />
<input type="hidden" name="input23" id="input23" />
<input type="hidden" name="input24" id="input24" />
<input type="hidden" name="input25" id="input25" />
<input type="hidden" name="input26" id="input26" />
<input type="hidden" name="input27" id="input27" />
<input type="hidden" name="input28" id="input28" />
<input type="hidden" name="input29" id="input29" />
<input type="hidden" name="input30" id="input30" />
<input type="hidden" name="input31" id="input31" />
<input type="hidden" name="input32" id="input32" />
<input type="hidden" name="input33" id="input33" />
<input type="hidden" name="input34" id="input34" />
<input type="hidden" name="input35" id="input35" />
<input type="hidden" name="input36" id="input36" />
<input type="hidden" name="input37" id="input37" />
<input type="hidden" name="input38" id="input38" />
<input type="hidden" name="input39" id="input39" />
<input type="hidden" name="input40" id="input40" />
<input type="hidden" name="input41" id="input41" />
<input type="hidden" name="input42" id="input42" />
<input type="hidden" name="input43" id="input43" />
<input type="hidden" name="input44" id="input44" />
<input type="hidden" name="input45" id="input45" />
<input type="hidden" name="input46" id="input46" />
<input type="hidden" name="input47" id="input47" />
<input type="hidden" name="input48" id="input48" />
<input type="hidden" name="input49" id="input49" />
<input type="hidden" name="input50" id="input50" />
<input type="hidden" name="input51" id="input51" />
<input type="hidden" name="input52" id="input52" />
<input type="hidden" name="input53" id="input53" />
<input type="hidden" name="input54" id="input54" />
<input type="hidden" name="input55" id="input55" />
<input type="hidden" name="input56" id="input56" />
<input type="hidden" name="input57" id="input57" />
<input type="hidden" name="input58" id="input58" />
<input type="hidden" name="input59" id="input59" />
<input type="hidden" name="input60" id="input60" />
<input type="hidden" name="input61" id="input61" />
<input type="hidden" name="input62" id="input62" />
<input type="hidden" name="input63" id="input63" />
<input type="hidden" name="input64" id="input64" />
<input type="hidden" name="input65" id="input65" />
<input type="hidden" name="input66" id="input66" />
<input type="hidden" name="input67" id="input67" />
<input type="hidden" name="input68" id="input68" />
<input type="hidden" name="input69" id="input69" />
<input type="hidden" name="input70" id="input70" />
<input type="hidden" name="input71" id="input71" />
<input type="hidden" name="input72" id="input72" />
<input type="hidden" name="input73" id="input73" />
<input type="hidden" name="input74" id="input74" />
<input type="hidden" name="input75" id="input75" />
<input type="hidden" name="input76" id="input76" />
<input type="hidden" name="input77" id="input77" />
<input type="hidden" name="input78" id="input78" />
<input type="hidden" name="input79" id="input79" />
<input type="hidden" name="input80" id="input80" />
<input type="hidden" name="input81" id="input81" />
<input type="hidden" name="input82" id="input82" />
<input type="hidden" name="input83" id="input83" />
<input type="hidden" name="input84" id="input84" />
<input type="hidden" name="input85" id="input85" />
<input type="hidden" name="input86" id="input86" />
<input type="hidden" name="input87" id="input87" />
<input type="hidden" name="input88" id="input88" />
<input type="hidden" name="input89" id="input89" />
<input type="hidden" name="input90" id="input90" />
<input type="hidden" name="input91" id="input91" />
<input type="hidden" name="input92" id="input92" />
<input type="hidden" name="input93" id="input93" />
<input type="hidden" name="input94" id="input94" />
<input type="hidden" name="input95" id="input95" />
<input type="hidden" name="input96" id="input96" />
<input type="hidden" name="input97" id="input97" />
<input type="hidden" name="input98" id="input98" />
<input type="hidden" name="input99" id="input99" />
<input type="hidden" name="input100" id="input100" />
<input type="hidden" name="input101" id="input101" />
<input type="hidden" name="input102" id="input102" />
<input type="hidden" name="input103" id="input103" />
<input type="hidden" name="input104" id="input104" />
<input type="hidden" name="input105" id="input105" />
<input type="hidden" name="input106" id="input106" />
<input type="hidden" name="input107" id="input107" />
<input type="hidden" name="input108" id="input108" />
<input type="hidden" name="input109" id="input109" />
<input type="hidden" name="input110" id="input110" />
<input type="hidden" name="input111" id="input111" />
<input type="hidden" name="input112" id="input112" />
<input type="hidden" name="input113" id="input113" />
<input type="hidden" name="input114" id="input114" />
<input type="hidden" name="input115" id="input115" />
<input type="hidden" name="input116" id="input116" />
<input type="hidden" name="input117" id="input117" />
<input type="hidden" name="input118" id="input118" />
<input type="hidden" name="input119" id="input119" />
<input type="hidden" name="input120" id="input120" />
<input type="hidden" name="input121" id="input121" />
<input type="hidden" name="input122" id="input122" />
<input type="hidden" name="input123" id="input123" />
<input type="hidden" name="input124" id="input124" />
<input type="hidden" name="input125" id="input125" />
<input type="hidden" name="input126" id="input126" />
<input type="hidden" name="input127" id="input127" />
<input type="hidden" name="input128" id="input128" />
<input type="hidden" name="input129" id="input129" />
<input type="hidden" name="input130" id="input130" />
<input type="hidden" name="input131" id="input131" />
<input type="hidden" name="input132" id="input132" />
<input type="hidden" name="input133" id="input133" />
<input type="hidden" name="input134" id="input134" />
<input type="hidden" name="input135" id="input135" />
<input type="hidden" name="input136" id="input136" />
<input type="hidden" name="input137" id="input137" />
<input type="hidden" name="input138" id="input138" />
<input type="hidden" name="input139" id="input139" />
<input type="hidden" name="input140" id="input140" />
<input type="hidden" name="input141" id="input141" />
<input type="hidden" name="input142" id="input142" />
<input type="hidden" name="input143" id="input143" />
<input type="hidden" name="input144" id="input144" />
<input type="hidden" name="input145" id="input145" />
<input type="hidden" name="input146" id="input146" />
<input type="hidden" name="input147" id="input147" />
<input type="hidden" name="input148" id="input148" />
<input type="hidden" name="input149" id="input149" />
<input type="hidden" name="input150" id="input150" />
<input type="hidden" name="input151" id="input151" />
<input type="hidden" name="input152" id="input152" />
<input type="hidden" name="input153" id="input153" />
<input type="hidden" name="input154" id="input154" />
<input type="hidden" name="input155" id="input155" />
<input type="hidden" name="input156" id="input156" />
<input type="hidden" name="input157" id="input157" />
<input type="hidden" name="input158" id="input158" />
<input type="hidden" name="input159" id="input159" />
<input type="hidden" name="input160" id="input160" />
<input type="hidden" name="input161" id="input161" />
<input type="hidden" name="input162" id="input162" />
<input type="hidden" name="input163" id="input163" />
<input type="hidden" name="input164" id="input164" />
<input type="hidden" name="input165" id="input165" />
<input type="hidden" name="input166" id="input166" />
<input type="hidden" name="input167" id="input167" />
<input type="hidden" name="input168" id="input168" />
<input type="hidden" name="input169" id="input169" />
<input type="hidden" name="input170" id="input170" />
<input type="hidden" name="input171" id="input171" />
<input type="hidden" name="input172" id="input172" />
<input type="hidden" name="input173" id="input173" />
<input type="hidden" name="input174" id="input174" />
<input type="hidden" name="input175" id="input175" />
<input type="hidden" name="input176" id="input176" />
<input type="hidden" name="input177" id="input177" />
<input type="hidden" name="input178" id="input178" />
<input type="hidden" name="input179" id="input179" />
<input type="hidden" name="input180" id="input180" />
<input type="hidden" name="input181" id="input181" />
<input type="hidden" name="input182" id="input182" />
<input type="hidden" name="input183" id="input183" />
<input type="hidden" name="input184" id="input184" />
<input type="hidden" name="input185" id="input185" />
<input type="hidden" name="input186" id="input186" />
<input type="hidden" name="input187" id="input187" />
<input type="hidden" name="input188" id="input188" />
<input type="hidden" name="input189" id="input189" />
<input type="hidden" name="input190" id="input190" />
<input type="hidden" name="input191" id="input191" />
<input type="hidden" name="input192" id="input192" />
<input type="hidden" name="input193" id="input193" />
<input type="hidden" name="input194" id="input194" />
<input type="hidden" name="input195" id="input195" />
<input type="hidden" name="input196" id="input196" />
<input type="hidden" name="input197" id="input197" />
<input type="hidden" name="input198" id="input198" />
<input type="hidden" name="input199" id="input199" />
<input type="hidden" name="input200" id="input200" />
</form>

Test runner

Ready to run.

Testing in
Test		Ops/sec
2 Elements: input[name]	`var radios = $('input[name=myRadio1]');`	ready
2 Elements: multiple #ids	`var radios = $('#myRadio1_1, #myRadio1_2');`	ready
10 Elements: input[name]	`var radios = $('input[name=myRadio2]');`	ready
10 Elements: multiple #ids	`var radios = $('#myRadio2_1, #myRadio2_2, #myRadio2_3, #myRadio2_4, #myRadio2_5, #myRadio2_6, #myRadio2_7, #myRadio2_8, #myRadio2_9, #myRadio2_10');`	ready
10 Elements: input[name], #scope	`var radios = $('input[name=myRadio2]', '#radios2');`	ready

Revisions

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

Revision 1: published by Rusty Jeans on October 4, 2011
Revision 2: published by steve on October 4, 2011
Revision 3: published by steve on October 4, 2011