Benchmark: querySelector vs querySelectorAll vs getElementsByClassName when trying to select by group of similar ID elements

HTML Preparation code:

<div class="test" id="test-1"></div>
<div class="test" id="test-2"></div>
<div class="test" id="test-3"></div>
<div class="test" id="test-4"></div>
<div class="test" id="test-5"></div>

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

querySelector class
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName(".test")
getElementById
document.getElementById("#test-1")
querySelector with wildcards
document.querySelector("[id^='test-']");
querySelectorAll with wildcards
document.querySelectorAll("[id^='test-']");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector class
getElementsByClassName
getElementById
querySelector with wildcards
querySelectorAll with wildcards

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 15; Mobile; rv:136.0) Gecko/136.0 Firefox/136.0

Browser/OS: Firefox Mobile 136 on Android

View result in a separate tab

Test name	Executions per second
querySelector class	3746736.8 Ops/sec
getElementsByClassName	5951979.5 Ops/sec
getElementById	6026779.0 Ops/sec
querySelector with wildcards	3368481.0 Ops/sec
querySelectorAll with wildcards	1247716.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark JSON provided outlines a performance comparison of various DOM selection methods in JavaScript when selecting elements based on their class names and IDs. Let's dive into the specifics of the tests conducted, the options compared, their pros and cons, and alternative methods for DOM selection.

### Options Compared

1. **`document.getElementById("#test-1")`**
   - **Test Name:** Get Element By ID
   - **Purpose:** Retrieves a single element with a specific ID, which is unique in the document.
   - **Pros:** 
     - Fastest method for selecting an element; direct access by ID.
     - Simplicity of use. 
   - **Cons:** 
     - Only retrieves one element (since IDs are unique).
   
2. **`document.getElementsByClassName(".test")`**
   - **Test Name:** Get Elements By Class Name
   - **Purpose:** Selects all elements with a specific class name.
   - **Pros:** 
     - Can retrieve multiple elements belonging to a class.
     - Performance is generally good for class selection.
   - **Cons:** 
     - Returns an HTMLCollection, which is not an array and requires additional conversion for array methods.
     - Results are live; changes to the DOM reflect automatically, which may lead to unintended updates.

3. **`document.querySelector(".test")`**
   - **Test Name:** Query Selector With Class
   - **Purpose:** Selects the first element that matches a specified CSS selector.
   - **Pros:** 
     - More versatile and allows for complex selectors.
     - Returns a single element, much like `getElementById`.
   - **Cons:** 
     - Generally not as fast as `getElementById`.
     
4. **`document.querySelector("[id^='test-']")`**
   - **Test Name:** Query Selector With Wildcards
   - **Purpose:** Selects the first element whose ID starts with 'test-'.
   - **Pros:** 
     - Allows for more flexible selection criteria using wildcards.
   - **Cons:** 
     - Performance may be slower compared to direct ID selection or class selection methods.
     
5. **`document.querySelectorAll("[id^='test-']")`**
   - **Test Name:** Query Selector All With Wildcards
   - **Purpose:** Selects all elements whose IDs start with 'test-'.
   - **Pros:** 
     - Similar flexibility to `querySelector` but retrieves all matching elements at once.
     - Returns a static NodeList, which does not reflect future changes to the DOM.
   - **Cons:** 
     - Slower than the simpler selectors, especially when used with complex patterns.

### Performance Results Summary

The benchmark results indicated the following approximate execution speeds, which indicate how many times per second each method can be executed on average:

- **Fastest:** `getElementById` (45,159,868 executions/sec)
- **Middle Tier:**
  - `getElementsByClassName` (21,228,334 executions/sec)
  - `querySelector` (17,285,412 executions/sec)
- **Slower:**
  - `querySelector` with wildcards (10,772,074 executions/sec)
  - `querySelectorAll` with wildcards (3,558,710.5 executions/sec)

### Considerations and Alternatives

While the methods tested are common in JavaScript for selecting DOM elements, other alternatives exist. For instance:

- **Using libraries like jQuery:** This library provides methods like `$(".test")` which encapsulate the complexity of DOM selection and offer a more consistent and cross-browser compatible API. However, it adds the overhead of another library.
  
- **Using modern frameworks:** Libraries and frameworks like React, Vue, or Angular manage DOM interactions differently, often abstracting direct DOM access away from the developer. This can help maintain performance but comes with a learning curve.

### Conclusion

The benchmark effectively highlights performance differences between standard DOM querying techniques in vanilla JavaScript. While `getElementById` proves to be the most efficient, `querySelector` and `querySelectorAll` provide flexibility at the cost of speed. Each method has its best use cases, and understanding them can help software engineers choose the optimal one depending on their application's requirements.

Related benchmarks:

querySelector vs querySelectorAll vs getElementsByClassName when trying to select by group of similar ID elements (version: 1)

Comparing performance of: querySelector class vs getElementsByClassName vs getElementById vs querySelector with wildcards vs querySelectorAll with wildcards

Created: one month ago by: Guest

Jump to the latest result

querySelector class

getElementsByClassName

getElementById

querySelector with wildcards

querySelectorAll with wildcards

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):