Benchmark: querySelector vs getElementById inside parent

HTML Preparation code:

<div class="cell">
            
<div class="grid-x grid-padding-x">
  <div id="size-configuration-table" class="cell small-24 large-6">
    <table class="vertical-table">
      <thead>
        <tr>
          <th class="table-title h6" colspan="2">
            Size Configuration
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th> Id </th>
          <td> 98 </td>
        </tr>

        <tr>
          <th> Categories </th>
          <td>
            <ul class="no-bullet">
                  <li>
                    <a href="/earth/categories/530">Ανδρικά Παντελόνια</a>
                  </li>
            </ul>
          </td>
        </tr>

        <tr>
          <th> Manufacturers </th>
          <td>
            <ul class="no-bullet">
                <li>
                  <a href="/earth/manufacturers/1282">Lacoste</a>
                </li>
            </ul>
          </td>
        </tr>

        <tr>
          <th> Gender </th>
          <td>
            <ul class="no-bullet">
                <li>
                  Men
                </li>
            </ul>
          </td>
        </tr>

        <tr>
          <th> Numeric system </th>
          <td> Manufacturer </td>
        </tr>

        <tr>
          <th> Target system </th>
          <td> International (S,M,L) </td>
        </tr>

        <tr>
          <th> Status </th>
          <td>
            <span class="label warning">
              Draft
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="size-chart" class="cell small-24 large-18">
    <table class="vertical-table">
      <thead>
        <tr>
          <th class="table-title h6" colspan="14">
            Size Chart
          </th>
        </tr>
        <tr>
          <th id="lala" class="text-center system">
            System
          </th>
          <th colspan="13" class="text-center sizes">
            Sizes
          </th>
        </tr>
      </thead>
      <tbody>
            <tr>
              <td>
                <b> IS </b>
              </td>
                <td> XS </td>
                <td> S </td>
                <td> S </td>
                <td> S </td>
                <td> M </td>
                <td> M </td>
                <td> L </td>
                <td> L </td>
                <td> XL </td>
                <td> XL </td>
                <td> XXL </td>
                <td> XXL </td>
                <td> XXXL </td>
            </tr>
            <tr>
              <td>
                <b> MNF </b>
              </td>
                <td> 34 </td>
                <td> 36 </td>
                <td> 36 </td>
                <td> 38 </td>
                <td> 40 </td>
                <td> 42 </td>
                <td> 44 </td>
                <td> 46 </td>
                <td> 48 </td>
                <td> 50 </td>
                <td> 52 </td>
                <td> 54 </td>
                <td> 56 </td>
            </tr>
            <tr>
              <td>
                <b> WL </b>
              </td>
                <td> 28 </td>
                <td> 28 </td>
                <td> 29 </td>
                <td> 30 </td>
                <td> 32 </td>
                <td> 33 </td>
                <td> 34 </td>
                <td> 36 </td>
                <td> 38 </td>
                <td> 40 </td>
                <td> 42 </td>
                <td> 44 </td>
                <td> 46 </td>
            </tr>
      </tbody>
    </table>
  </div>
</div>

          </div>

Script Preparation code:

const parentElement = document.getElementById('size-chart');

Tests:

QuerySelector
parentElement.querySelector('#lala');
getelementById
document.getElementById('lala')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
QuerySelector
getelementById

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

Browser/OS: Chrome 81 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
QuerySelector	0.0 Ops/sec
getelementById	3401422.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its options.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches:

1. `querySelector` (querying by ID using the query selector API)
2. `getElementById` (getting an element by its ID directly)

**Script Preparation Code**

The script prepares a HTML document with a table structure:
```javascript
const parentElement = document.getElementById('size-chart');
```
This sets up the DOM and makes it accessible to both query methods.

**Html Preparation Code**

The HTML code is embedded in the benchmark definition, which creates a table structure with an element having ID `#lala` inside another element with ID `size-chart`.

**Individual Test Cases**

There are two test cases:

1. **QuerySelector**: The script uses `querySelector` to select the element with ID `#lala`.
2. **getelementById**: The script directly uses `getElementById` to get the element with ID `#lala`.

**Options Compared**

The benchmark compares two query methods:

* **`querySelector`**: Uses the query selector API to find an element by its CSS selector (in this case, `#lala`). This method is more flexible and can be used for multiple purposes.
* **`getElementById`**: Directly gets an element by its ID. This method is simple but less flexible than `querySelector`.

**Pros and Cons**

**QuerySelector:**

Pros:

* More flexible and versatile
* Can be used for multiple purposes (not just getting elements)
* Less DOM manipulation required

Cons:

* Might be slower due to the overhead of parsing CSS selectors
* Requires support for the query selector API, which might not be available in older browsers

**getelementById:**

Pros:

* Fast and simple
* Doesn't require additional libraries or APIs
* Works well for getting a single element by its ID

Cons:

* Less flexible and less versatile than `querySelector`
* Can be slower due to the overhead of parsing IDs

**Benchmark Result**

The latest benchmark result shows that:

* `getelementById` outperforms `QuerySelector` with an execution rate of 3401422.5 executions per second.
* `QuerySelector` has a much lower execution rate (0 executions per second), indicating it is slower.

Overall, the benchmark suggests that `getelementById` is faster than `QuerySelector` for this specific use case. However, the performance difference might vary depending on the context and requirements of your application.

Related benchmarks:

querySelector vs getElementById inside parent (version: 0)

Comparing performance of: QuerySelector vs getelementById

Created: 4 years ago by: Guest

Jump to the latest result

QuerySelector

getelementById

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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