<ul id="filtration">
<li class="first">Urval</li>
<li>
<div class="selectContainer filtration">
<select id="filterType" class="filtration" multiple="multiple" size="1" autocomplete="off" style="visibility: hidden; ">
<option value="">Typ</option>
<option value="Klänningar">Klänningar</option>
<option value="Byxor" selected="selected">Byxor</option>
<option value="Toppar">Toppar</option>
</select>
<a class="dropdown ischanged"><span class="toggle"></span><span>Byxor</span></a><ul class="DD_values bullets" style="display: none; "><li><a href="#" data-val="Klänningar"><span>Klänningar</span></a></li><li><a href="#" data-val="Byxor" class="selected"><span>Byxor</span></a></li><li><a href="#" data-val="Toppar"><span>Toppar</span></a></li></ul></div>
</li>
<li>
<div class="selectContainer filtration">
<select id="filterColor" class="filtration" multiple="multiple" autocomplete="off" style="visibility: hidden; ">
<option value="">Färg</option>
<option value="red">Röd</option>
<option value="green">Grön</option>
<option value="blue">Blå</option>
</select>
<a class="dropdown"><span class="toggle"></span><span>Färg</span></a><ul class="DD_values bullets" style="display: none; "><li><a href="#" data-val="red"><span>Röd</span></a></li><li><a href="#" data-val="green"><span>Grön</span></a></li><li><a href="#" data-val="blue"><span>Blå</span></a></li></ul></div>
</li>
<li>
<div class="selectContainer filtration">
<select id="filterSize" class="filtration" autocomplete="off" style="visibility: hidden; ">
<option value="">Storlek</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<a class="dropdown"><span class="toggle"></span><span>Storlek</span></a><ul class="DD_values bullets" style="display: none; "><li><a href="#" data-val="XS"><span>XS</span></a></li><li><a href="#" data-val="S"><span>S</span></a></li><li><a href="#" data-val="M"><span>M</span></a></li><li><a href="#" data-val="L"><span>L</span></a></li><li><a href="#" data-val="XL"><span>XL</span></a></li></ul></div>
</li>
<li class="sort">Sortering</li>
<li>
<div class="selectContainer filtration">
<select id="sortBy" class="filtration" autocomplete="off" style="visibility: hidden; ">
<option value="senast" selected="selected">Senast inkommet</option>
<option value="stigande">Stigande pris</option>
<option value="fallande">Fallande pris</option>
</select>
<a class="dropdown ischanged"><span class="toggle"></span><span>Senast inkommet</span></a><ul class="DD_values bullets" style="display: none; "><li><a href="#" data-val="senast" class="selected"><span>Senast inkommet</span></a></li><li><a href="#" data-val="stigande"><span>Stigande pris</span></a></li><li><a href="#" data-val="fallande"><span>Fallande pris</span></a></li></ul></div>
</li>
<li class="last"><a href="" class="clear_filt"><span>Visa</span></a>(50)</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var denna = $("#filterType"),
idn;
</script>
console.log(denna.parent());
console.log(denna.closest('li'));
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Parent 2 | |
Closest 2 |
Test name | Executions per second |
---|---|
Parent 2 | 17862.2 Ops/sec |
Closest 2 | 14767.3 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.
Benchmark Definition Json
The benchmark definition json contains information about the test case and its script preparation code. In this case, we have two individual test cases: "Parent 2" and "Closest 2". The script preparation code is empty, which means that no specific setup or initialization is required for these tests.
Tested Options
The two test cases are comparing the performance of denna.parent()
and denna.closest('li')
methods.
Options Compared
The options being compared are:
denna.parent()
: Returns a reference to the parent element, which can be used to traverse the DOM tree upwards.denna.closest('li')
: Searches for the closest ancestor that matches the 'li' selector and returns it.Browser and Device Information
The latest benchmark result includes information about the browser and device being tested:
Performance Results
The performance results show the number of executions per second for each test case:
These results indicate that denna.parent()
is faster than denna.closest('li')
on this specific browser and device configuration.
JavaScript Functions Used
Both test cases utilize the jQuery library, which is included in the benchmark definition json:
$ = function(jQuery) { ... };
denna = $( "#filterType" );
These lines of code set up a jQuery object named "denna" and initialize it with an element that has the id "filterType".
Conclusion
In summary, MeasureThat.net is testing the performance of two JavaScript methods: denna.parent()
and denna.closest('li')
. The results indicate that denna.parent()
is faster than denna.closest('li')
on this specific browser and device configuration.