Benchmark: querySelector, querySelectorAll, getElementsByClassName, querySelector (ID), getElementsByID

HTML Preparation code:

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

Tests:

querySelector
document.querySelector(".test")
querySelectorAll
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName("test")
querySelector (ID)
document.querySelector("#test")
getElementsByID
document.getElementById("test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
querySelectorAll
getElementsByClassName
querySelector (ID)
getElementsByID

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Yandex Browser 25 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	15648619.0 Ops/sec
querySelectorAll	5167806.0 Ops/sec
getElementsByClassName	15711879.0 Ops/sec
querySelector (ID)	7695480.0 Ops/sec
getElementsByID	22928622.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The provided benchmark assesses the performance of various DOM element selection methods in JavaScript. Specifically, it compares the execution speeds of:

1. **`document.querySelector(".test")`**: Selects the first element that matches the specified CSS selector (in this case, elements with the class "test").
2. **`document.querySelectorAll(".test")`**: Selects all elements that match the specified CSS selector.
3. **`document.getElementsByClassName("test")`**: Selects all elements with the specified class name.
4. **`document.querySelector("#test")`**: Selects the first element matching the CSS selector for the ID "test".
5. **`document.getElementById("test")`**: Selects the element with the specific ID "test".

### Performance Results
The benchmark results show execution speeds measured in "Executions Per Second" for each method on a Firefox 136 browser. Higher values indicate better performance. The results are as follows:

- **`getElementsByClassName`**: **3,850,284.75** executions per second. This method is the fastest, indicating that it performs efficiently in terms of selecting elements by class name.
- **`getElementById`**: **3,689,571.5** executions per second. This function is also very fast, as it uses the ID, which is a unique identifier within the document.
- **`querySelector("#test")`**: **2,266,551.75** executions per second. While not as fast as the previous two, it remains quite efficient when querying by ID.
- **`querySelector(".test")`**: **2,191,261.0** executions per second. This is slower than the specific ID selection but still reasonably fast.
- **`querySelectorAll(".test")`**: **858,692.25** executions per second. This is the slowest option in this test, as it not only finds all matching elements but also returns a NodeList that may require additional processing.

### Options Compared
1. **`querySelector` vs. `getElementById`**:
   - **Pros**: Both are efficient, but `getElementById` is marginally faster because it deals with a unique element.
   - **Cons**: `querySelector` offers more flexibility since it can use complex CSS selectors.

2. **`querySelectorAll` vs. `getElementsByClassName`**:
   - **Pros**: `getElementsByClassName` is generally faster than `querySelectorAll`, as it is optimized specifically for class name selection.
   - **Cons**: `querySelectorAll` can select using any CSS selector, offering more versatility at the cost of performance.

3. **Performance Considerations**:
   - When performance is critical and you need to select elements by ID or class, prefer `getElementById` or `getElementsByClassName`.
   - For more complex selections, `querySelector` and `querySelectorAll` are necessary, but be aware of their relative slowness compared to the specialized methods.

### Libraries and Features
No additional libraries are used in this benchmark; it solely leverages the vanilla JavaScript DOM API. Each of the selected methods is a built-in feature of JavaScript for accessing and manipulating DOM elements.

### Alternatives
- **`document.getElementsByTagName("tagName")`**: This method is another alternative that can be used to select elements by their tag. However, like `getElementsByClassName`, it returns a live HTMLCollection, which may not be as convenient as the static NodeList returned by `querySelectorAll`.
- **Using libraries/frameworks**: Libraries like jQuery provide methods like `$('.test')` which can simplify selection but may add overhead, making them less performant than native methods.

In conclusion, the choice of method for DOM selection in JavaScript depends on the specific requirements of the task (single vs. multiple elements, selector complexity) and performance considerations, which are highlighted in the benchmark results provided.

Related benchmarks:

querySelector, querySelectorAll, getElementsByClassName, querySelector (ID), getElementsByID (version: 1)

Comparing performance of: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID

Created: one month ago by: Registered User

Jump to the latest result

querySelector

querySelectorAll

getElementsByClassName

querySelector (ID)

getElementsByID

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):