Benchmark: querySelector vs getElementsByClassName with destructuring assignment vs getElementsByClassName get first element

HTML Preparation code:

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

Tests:

querySelector
/*When writing async/deferred tests, use `deferred.resolve()` to mark test as done*/ const testElement = document.querySelector(".test");
getElementsByClassName with destructuring assignment
const [testElement] = document.getElementsByClassName(".test");
getElementsByClassName get first element
const testElement = document.getElementsByClassName(".test")[0];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByClassName with destructuring assignment
getElementsByClassName get first element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	26744934.0 Ops/sec
getElementsByClassName with destructuring assignment	15505136.0 Ops/sec
getElementsByClassName get first element	21259350.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests the performance of three different methods for selecting DOM elements in JavaScript. Specifically, it compares:

1. **`querySelector`**: 
   - **Method**: This method allows you to select the first element that matches a specified CSS selector.
   - **Performance**: Achieved an execution rate of **26,744,934** operations per second, which was the highest among the three methods tested. 
   - **Pros**: It is flexible and can handle complex selectors, making it easier to write more readable and maintainable code.
   - **Cons**: While generally efficient, it can be slower than more specialized methods when selecting by class or ID due to its generalized parsing and matching process.

2. **`getElementsByClassName` with destructuring assignment**:
   - **Method**: This approach uses the `getElementsByClassName` method to retrieve elements by their class name and utilizes JavaScript's destructuring assignment to extract the first element from the resulting HTMLCollection.
   - **Performance**: This test recorded an execution rate of **21,259,350** operations per second.
   - **Pros**: It is typically faster than `querySelector` for specific class selections because it directly returns a live HTMLCollection. 
   - **Cons**: The destructuring syntax can introduce a slight overhead, and the syntax can be less intuitive for developers unfamiliar with destructuring.

3. **`getElementsByClassName` getting the first element directly**:
   - **Method**: Similar to the previous method, but it directly accesses the first element from the results instead of using destructuring.
   - **Performance**: This approach had an execution rate of **15,505,136** operations per second, making it the slowest of the three.
   - **Pros**: This is straightforward and avoids any syntactic overhead, making it easy to understand the intent of accessing the first element directly.
   - **Cons**: It is slightly less readable than using destructuring; it also operates on a live collection, but the performance benefit compared to the destructured approach doesn't outweigh the added readability of destructuring.

### Alternatives Considered
- **`getElementById`**: For selecting a single element when you know its ID, which is the fastest option available since it directly accesses the element without needing to parse any selectors.
- **`querySelectorAll`**: This returns all elements matching a selector, but it won't be as fast as `getElementsByClassName` for class-based queries and also returns a static NodeList instead of a live collection.

### Summary of Findings
- The `querySelector` method is generally the fastest and most versatile option for selecting DOM elements based on CSS selectors.
- Using `getElementsByClassName` offers performance benefits for inputs specifying class names, especially when avoiding the overhead of destructuring.
- The simplest naive approach of directly accessing the first element is the least performant and should be avoided when optimization is a concern.

In conclusion, choosing between these methods depends on specific needs—whether you prioritize flexibility and readability (favoring `querySelector`) or raw performance (favoring `getElementsByClassName`).

Related benchmarks:

querySelector vs getElementsByClassName with destructuring assignment vs getElementsByClassName get first element (version: 1)

Comparing performance of: querySelector vs getElementsByClassName with destructuring assignment vs getElementsByClassName get first element

Created: one month ago by: Guest

Jump to the latest result

querySelector

getElementsByClassName with destructuring assignment

getElementsByClassName get first element

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