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 parent().parent() vs closest() (v2)

Revision 2 of this benchmark created by randomer on October 30, 2013

Preparation HTML

<form id="crf" action="" method="get" accept-charset="UTF-8">

<div>
<i>Passagerare</i>
<select onchange="loadFilter('#sailing-search')" id="edit-number-of-guests" name="number_of_guests">
        <option value="1">1 passagerare</option>
        <option value="2" selected="selected">2 passagerare</option>
        <option value="3">3 passagerare</option>
        <option value="4">4 passagerare</option>
</select>
        
<i>Datum</i>
<select onchange="loadFilter('#sailing-search')" id="edit-date" name="date">
        <option value="" selected="selected">- Alla datum -</option><optgroup label="2013">
        <option value="2013-11">november 2013</option>
        <option value="2013-12">december 2013</option></optgroup><optgroup label="2014">
        <option value="2014-01">januari 2014</option>
        <option value="2014-02">februari 2014</option>
        <option value="2014-03">mars 2014</option>
        <option value="2014-04">april 2014</option>
        <option value="2014-05">maj 2014</option>
        <option value="2014-06">juni 2014</option>
        <option value="2014-07">juli 2014</option>
        <option value="2014-08">augusti 2014</option>
        <option value="2014-09">september 2014</option>
        <option value="2014-10">oktober 2014</option>
        <option value="2014-11">november 2014</option>
        <option value="2014-12">december 2014</option></optgroup><optgroup label="2015">
        <option value="2015-01">januari 2015</option>
        <option value="2015-02">februari 2015</option>
        <option value="2015-03">mars 2015</option>
        <option value="2015-04">april 2015</option>
        <option value="2015-05">maj 2015</option></optgroup>
</select>
        
<i>Resmål</i>
<select onchange="loadFilter('#sailing-search')" id="edit-destination" name="destination">
        <option value="" selected="selected">- Alla resmål -</option>
        <option value="AFR">Afrika</option>
        <option value="ALC">Alaska</option>
        <option value="FAE">Asien</option>
        <option value="TRA">Atlantkryssning</option>
        <option value="AUS_BRK_NZL">Australien &amp; Nya Zeeland</option>
        <option value="EUR_MEW_Östra Medelhavet_MIE_NEU_SEU_WEU_WAL">Europa</option>
        <option value="CNE_R">Kanada &amp; Nya England</option>
        <option value="CAE_BER_CAR_CAS_CAW">Karibien</option>
        <option value="MEX_PAC">Mexikaniska Rivieran</option>
        <option value="TPA">Panamakanalen</option>
        <option value="SAM">Sydamerika</option>
        <option value="HAW_ISL_SPA">Söderhavet &amp; Hawaii</option>
        <option value="WWW_WWC_POS">Världskryssning</option>
</select>
</div>

<div>
<i>Hamnar</i>
<select onchange="loadFilter('#sailing-search')" id="edit-embark-port" name="embark_port">
        <option value="" selected="selected">- Alla hamnar -</option>
        <option value="ATH">Aten</option>
        <option value="AKL">Auckland</option>
        <option value="BCN">Barcelona</option>
        <option value="BNE">Brisbane</option>
        <option value="BUE">Buenos Aires</option>
        <option value="ROM">Civitavecchia (Rom)</option>
        <option value="QQD">Dover</option>
        <option value="DXB">Dubai</option>
        <option value="FLL">Fort Lauderdale</option>
        <option value="JFM">Fremantle (Perth)</option>
        <option value="HKG">Hong Kong</option>
        <option value="HNL">Honolulu</option>
        <option value="HOU">Houston</option>
        <option value="HUN">Hualien</option>
        <option value="CPT">Kapstaden</option>
        <option value="UKB">Kobe</option>
        <option value="CPH">Köpenhamn</option>
        <option value="LC1">Laem Chabang (Bangkok)</option>
        <option value="LAX">Los Angeles</option>
        <option value="MAO">Manaus</option>
        <option value="MEL">Melbourne</option>
        <option value="NYC">New York</option>
        <option value="QOT">Otaru (Japan)</option>
        <option value="PPT">Papeete</option>
        <option value="YQB">Quebec</option>
        <option value="GIG">Rio De Janeiro</option>
        <option value="LED">S: T Petersburg</option>
        <option value="SFO">San Francisco</option>
        <option value="SEA">Seattle</option>
        <option value="SHA">Shanghai</option>
        <option value="SIN">Singapore</option>
        <option value="SOU">Southampton</option>
        <option value="SYD">Sydney</option>
        <option value="TSN">Tianjin (Peking)</option>
        <option value="VAP">Valparaiso (Santiago De Chile)</option>
        <option value="YVR">Vancouver</option>
        <option value="VCE">Venedig</option>
        <option value="ZWD">Warnemünde (Berlin)</option>
        <option value="WH1">Whittier (Anchorage)</option>
        <option value="YOK">Yokohama (Tokyo)</option>
</select>

<i>Fartyg</i>
<select onchange="loadFilter('#sailing-search')" id="edit-ship" name="ship">
        <option value="" selected="selected">- Alla fartyg -</option>
        <option value="CB">Caribbean Princess</option>
        <option value="CO">Coral Princess</option>
        <option value="KP">Crown Princess</option>
        <option value="DP">Dawn Princess</option>
        <option value="DI">Diamond Princess</option>
        <option value="EP">Emerald Princess</option>
        <option value="NP">Golden Princess</option>
        <option value="AP">Grand Princess</option>
        <option value="IP">Island Princess</option>
        <option value="OP">Ocean Princess</option>
        <option value="PA">Pacific Princess</option>
        <option value="GP">Regal Princess</option>
        <option value="RP">Royal Princess</option>
        <option value="RU">Ruby Princess</option>
        <option value="SA">Sapphire Princess</option>
        <option value="CP">Sea Princess</option>
        <option value="TP">Star Princess</option>
        <option value="SP">Sun Princess</option>
</select>

<i>Längd</i>
<select onchange="loadFilter('#sailing-search')" id="edit-duration" name="duration">
        <option value="" selected="selected">- Alla reslängder -</option>
        <option value="1-6">1-6 dagar</option>
        <option value="7-14">7-14 dagar</option>
        <option value="15-22">15-22 dagar</option>
        <option value="23-199">&gt; 23 dagar</option>
</select>
</div>
</form>













<form id="crftwo" action="" method="get" accept-charset="UTF-8">

<div>
<i>Passagerare</i>
<select onchange="loadFilter('#sailing-search')" id="edit-number-of-guests" name="number_of_guests">
        <option value="1">1 passagerare</option>
        <option value="2" selected="selected">2 passagerare</option>
        <option value="3">3 passagerare</option>
        <option value="4">4 passagerare</option>
</select>
        
<i>Datum</i>
<select onchange="loadFilter('#sailing-search')" id="edit-date" name="date">
        <option value="" selected="selected">- Alla datum -</option><optgroup label="2013">
        <option value="2013-11">november 2013</option>
        <option value="2013-12">december 2013</option></optgroup><optgroup label="2014">
        <option value="2014-01">januari 2014</option>
        <option value="2014-02">februari 2014</option>
        <option value="2014-03">mars 2014</option>
        <option value="2014-04">april 2014</option>
        <option value="2014-05">maj 2014</option>
        <option value="2014-06">juni 2014</option>
        <option value="2014-07">juli 2014</option>
        <option value="2014-08">augusti 2014</option>
        <option value="2014-09">september 2014</option>
        <option value="2014-10">oktober 2014</option>
        <option value="2014-11">november 2014</option>
        <option value="2014-12">december 2014</option></optgroup><optgroup label="2015">
        <option value="2015-01">januari 2015</option>
        <option value="2015-02">februari 2015</option>
        <option value="2015-03">mars 2015</option>
        <option value="2015-04">april 2015</option>
        <option value="2015-05">maj 2015</option></optgroup>
</select>
        
<i>Resmål</i>
<select onchange="loadFilter('#sailing-search')" id="edit-destination" name="destination">
        <option value="" selected="selected">- Alla resmål -</option>
        <option value="AFR">Afrika</option>
        <option value="ALC">Alaska</option>
        <option value="FAE">Asien</option>
        <option value="TRA">Atlantkryssning</option>
        <option value="AUS_BRK_NZL">Australien &amp; Nya Zeeland</option>
        <option value="EUR_MEW_Östra Medelhavet_MIE_NEU_SEU_WEU_WAL">Europa</option>
        <option value="CNE_R">Kanada &amp; Nya England</option>
        <option value="CAE_BER_CAR_CAS_CAW">Karibien</option>
        <option value="MEX_PAC">Mexikaniska Rivieran</option>
        <option value="TPA">Panamakanalen</option>
        <option value="SAM">Sydamerika</option>
        <option value="HAW_ISL_SPA">Söderhavet &amp; Hawaii</option>
        <option value="WWW_WWC_POS">Världskryssning</option>
</select>
</div>

<div>
<i>Hamnar</i>
<select onchange="loadFilter('#sailing-search')" id="edit-embark-port" name="embark_port">
        <option value="" selected="selected">- Alla hamnar -</option>
        <option value="ATH">Aten</option>
        <option value="AKL">Auckland</option>
        <option value="BCN">Barcelona</option>
        <option value="BNE">Brisbane</option>
        <option value="BUE">Buenos Aires</option>
        <option value="ROM">Civitavecchia (Rom)</option>
        <option value="QQD">Dover</option>
        <option value="DXB">Dubai</option>
        <option value="FLL">Fort Lauderdale</option>
        <option value="JFM">Fremantle (Perth)</option>
        <option value="HKG">Hong Kong</option>
        <option value="HNL">Honolulu</option>
        <option value="HOU">Houston</option>
        <option value="HUN">Hualien</option>
        <option value="CPT">Kapstaden</option>
        <option value="UKB">Kobe</option>
        <option value="CPH">Köpenhamn</option>
        <option value="LC1">Laem Chabang (Bangkok)</option>
        <option value="LAX">Los Angeles</option>
        <option value="MAO">Manaus</option>
        <option value="MEL">Melbourne</option>
        <option value="NYC">New York</option>
        <option value="QOT">Otaru (Japan)</option>
        <option value="PPT">Papeete</option>
        <option value="YQB">Quebec</option>
        <option value="GIG">Rio De Janeiro</option>
        <option value="LED">S: T Petersburg</option>
        <option value="SFO">San Francisco</option>
        <option value="SEA">Seattle</option>
        <option value="SHA">Shanghai</option>
        <option value="SIN">Singapore</option>
        <option value="SOU">Southampton</option>
        <option value="SYD">Sydney</option>
        <option value="TSN">Tianjin (Peking)</option>
        <option value="VAP">Valparaiso (Santiago De Chile)</option>
        <option value="YVR">Vancouver</option>
        <option value="VCE">Venedig</option>
        <option value="ZWD">Warnemünde (Berlin)</option>
        <option value="WH1">Whittier (Anchorage)</option>
        <option value="YOK">Yokohama (Tokyo)</option>
</select>

<i>Fartyg</i>
<select onchange="loadFilter('#sailing-search')" id="edit-ship" name="ship">
        <option value="" selected="selected">- Alla fartyg -</option>
        <option value="CB">Caribbean Princess</option>
        <option value="CO">Coral Princess</option>
        <option value="KP">Crown Princess</option>
        <option value="DP">Dawn Princess</option>
        <option value="DI">Diamond Princess</option>
        <option value="EP">Emerald Princess</option>
        <option value="NP">Golden Princess</option>
        <option value="AP">Grand Princess</option>
        <option value="IP">Island Princess</option>
        <option value="OP">Ocean Princess</option>
        <option value="PA">Pacific Princess</option>
        <option value="GP">Regal Princess</option>
        <option value="RP">Royal Princess</option>
        <option value="RU">Ruby Princess</option>
        <option value="SA">Sapphire Princess</option>
        <option value="CP">Sea Princess</option>
        <option value="TP">Star Princess</option>
        <option value="SP">Sun Princess</option>
</select>

<i>Längd</i>
<select onchange="loadFilter('#sailing-search')" id="edit-duration" name="duration">
        <option value="" selected="selected">- Alla reslängder -</option>
        <option value="1-6">1-6 dagar</option>
        <option value="7-14">7-14 dagar</option>
        <option value="15-22">15-22 dagar</option>
        <option value="23-199">&gt; 23 dagar</option>
</select>
</div>

</form>


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

Test runner

Ready to run.

Test Ops/sec

parent().parent()

Testing in
Test	Ops/sec
parent().parent()	`var selects = $('select'); selects.each(function(){ var t = $(this); var tp = t.parent().parent(); tp.css('color','red'); })`	ready
closest()	`var selects = $('select'); var forms = $('form'); selects.each(function(){ var t = $(this); var tp = t.closest(forms); tp.css('color','red'); })`	ready
parents():first	`var selects = $('select'); var forms = $('form'); selects.each(function(){ var t = $(this); var tp = t.parents(forms).first(); tp.css('color','red'); })`	ready

var selects = $('select');

selects.each(function(){
var t = $(this);
var tp = t.parent().parent();
tp.css('color','red');
})

ready

closest()

var selects = $('select');
var forms = $('form');

selects.each(function(){
var t = $(this);
var tp = t.closest(forms);
tp.css('color','red');
})

ready

parents():first

var selects = $('select');
var forms = $('form');

selects.each(function(){
var t = $(this);
var tp = t.parents(forms).first();
tp.css('color','red');
})

ready

Revisions

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

Revision 1: published on December 7, 2012
Revision 2: published by randomer on October 30, 2013
Revision 3: published on April 15, 2014