Benchmark: JS selector functions specificity

HTML Preparation code:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Tests:

querySelectorAll tagname
document.querySelectorAll("div.test")
querySelectorAll class
document.querySelectorAll(".test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll tagname
querySelectorAll class

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll tagname	504705.7 Ops/sec
querySelectorAll class	1175956.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):

LLMs can make mistakes. Check important info.

The benchmark titled "JS selector functions specificity" evaluates the performance of different ways to select DOM elements using the `document.querySelectorAll()` method in JavaScript. Specifically, it tests two different selectors: one using a tag name selector and the other using a class name selector.

### Test Cases Explained

1. **Selecting by Tag Name:**
   - **Test Case:** `document.querySelectorAll("div.test")`
   - **Description:** This test case uses a combination of the tag selector (`div`) and a class selector (`.test`). This means it will select all `<div>` elements that also have the class `test`, which is essentially all the divs created in the HTML preparation code since they all carry the class `test`.

2. **Selecting by Class Name:**
   - **Test Case:** `document.querySelectorAll(".test")`
   - **Description:** This test case selects all elements that have the class `test`. Since all the divs are marked with this class, it will select all of them as well.

### Performance and Results

- The benchmark results indicate that selecting elements using a class selector (`document.querySelectorAll(".test")`) resulted in approximately **1,175,957 executions per second**, whereas selecting using the tag name along with the class (`document.querySelectorAll("div.test")`) yielded about **504,706 executions per second**.

### Pros and Cons of Different Approaches

- **Selecting by Class Name (`.test`):**
  - **Pros:**
    - Generally faster as it directly targets elements with a specific class.
    - More versatile, as it can select elements from any tag type, not limited to just `<div>`s.
  - **Cons:**
    - If there are many classes with the same name across different elements, it could lead to unintended selections if not managed properly.

- **Selecting by Tag Name and Class (`div.test`):**
  - **Pros:**
    - More specific; ensures that only `<div>` elements are selected, which can prevent undesired selections if other elements have the same class.
  - **Cons:**
    - Slower performance as it has to check both the tag name and the class.
    - Less flexible regarding the type of elements you can select.

### Other Considerations

1. **Browser Performance:** The benchmark was executed on Chrome 135, which means the results pertain to how this specific browser version handles these operations. Performance may vary on different browsers or versions.

2. **Batching of DOM Elements:** When querying multiple elements, using more specific selectors may impose a performance overhead due to the two-stage checking process (first checking the tag, then the class).

### Alternatives

Other methods of selecting DOM elements include:

- **`getElementsByClassName(className)`**: This method returns a live HTMLCollection of elements with the specified class name. It can be faster for class selections, but it's less flexible than `querySelectorAll` since it does not support complex selectors.
- **`getElementsByTagName(tagName)`**: Similar to `getElementsByClassName`, this method retrieves a live HTMLCollection of elements with the specified tag name.
- **`find()` with jQuery or similar libraries:** If using libraries like jQuery, you can leverage their optimized performance and additional utilities for selecting and manipulating elements.

In conclusion, the benchmark highlights the performance differences between two common techniques for selecting DOM elements, with implications for application performance and maintainability in scenarios with numerous element interactions. It serves as a useful reminder of the trade-offs in specificity and performance when selecting elements via JavaScript.

Related benchmarks:

JS selector functions specificity (version: 1)

Comparing performance of: querySelectorAll tagname vs querySelectorAll class

Created: 3 days ago by: Guest

Jump to the latest result

querySelectorAll tagname

querySelectorAll class

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):