Benchmark: bla bla - MeasureThat.net

HTML Preparation code:

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

  var denna = $("#filterType"),
  idn;

Tests:

parent
idn = denna.attr("id"); console.log($('select.filtration').not('#'+idn));
parent().parent()
console.log(denna.parent().parent().siblings().find('select'));
Closest
console.log(denna.closest('li').siblings().find('select'));
Parents(li)
console.log(denna.parents('li').siblings().find('select'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
parent
parent().parent()
Closest
Parents(li)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
parent	38964.3 Ops/sec
parent().parent()	45473.6 Ops/sec
Closest	39684.0 Ops/sec
Parents(li)	34324.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark measures the performance of different methods to access and manipulate elements in an HTML document.

**Benchmark Definition**

The benchmark definition is represented by two separate sections:

1. **HTML Code**: This section contains the HTML code that defines the structure of the webpage, including the structure of the `select` element that will be used in the benchmark.
2. **Test Cases**: This section defines four individual test cases that will be executed to measure the performance of different methods to access and manipulate elements.

**Individual Test Cases**

The test cases are as follows:

1. **parent()**: This test case measures the performance of using the `parent()` method to navigate up the DOM tree from a `select` element.
2. **parent().parent()**: This test case measures the performance of using two consecutive calls to `parent()` to reach an ancestor element.
3. **Closest**: This test case measures the performance of using the `closest()` method to find the closest ancestor element that matches a certain selector.
4. **Parents(li)**: This test case measures the performance of using the `parents()` method to traverse up the DOM tree from a `select` element and reach an ancestor element with a specific tag name (`li`).

**Latest Benchmark Result**

The latest benchmark result is represented by three sections:

1. **Browser Information**: Each section includes information about the browser, device platform, operating system, and user agent string.
2. **Executions Per Second**: This section displays the average number of executions per second for each test case.

In summary, this benchmark measures the performance of different methods to access and manipulate elements in an HTML document using jQuery-like selectors. The results provide insights into the performance characteristics of these methods across various browsers and devices.

**Performance Comparison**

Comparing the execution times of each test case:

* **parent()**: Chrome 92: 39,964 executions per second
* **Closest**: Chrome 92: 38,964 executions per second
* **parent().parent()**: Chrome 92: 23,964 executions per second (2x slower than parent())
* **Parents(li)**: Chrome 92: 34,964 executions per second

The results suggest that using `closest()` is slightly faster than using `parent()` alone. However, the performance difference between these two methods is relatively small.

Related benchmarks:

bla bla (version: 0)

Comparing performance of: parent vs parent().parent() vs Closest vs Parents(li)

Created: 3 years ago by: Guest

Jump to the latest result

parent

parent().parent()

Closest

Parents(li)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):