Benchmark: querySelector vs getElementById

HTML Preparation code:

<!--your preparation HTML code goes here-->
<sspa id="sspa">
  <span>hello world</span>
</sspa

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
document.querySelector("sspa")
getElementById
document.getElementById("sspa")

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 6 runs

getElementById

33.9M/s

querySelector

15.3M/s

Fastest: getElementById (2.2x faster)

View exact numbers

✓ getElementById: 33,883,568 ops/sec
• querySelector: 15,312,658 ops/sec

Firefox 6 runs

getElementById

11.3M/s

querySelector

6.0M/s

Fastest: getElementById (1.9x faster)

View exact numbers

✓ getElementById: 11,301,222 ops/sec
• querySelector: 5,958,773 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 28 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Mac OS X 10.15

View result in a separate tab

getElementById

19.4M/s

querySelector

12.5M/s

View exact numbers

Test name	Executions per second
✓ getElementById	19,433,364 Ops/sec
querySelector	12,453,493 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

LLMs can make mistakes. Check important info.

The provided benchmark compares two methods for selecting HTML elements in the Document Object Model (DOM): `document.querySelector` and `document.getElementById`.

### Comparison of Options

1. **`document.querySelector`**:
   - **Description**: This method allows you to select a single DOM element based on a CSS selector. It can use any valid CSS selector, which means it can select elements by ID, class, attribute, and more.
   - **Pros**:
     - Flexibility: Can select elements using a variety of selectors, not just by ID.
     - Conciseness: Oftentimes requires less code for complex selections.
   - **Cons**:
     - Performance: Generally slower than `getElementById` due to the parsing and matching of CSS selectors.
     - Overhead: Involves more processing since it has to evaluate a selector string.

2. **`document.getElementById`**:
   - **Description**: This method is specifically designed to select a DOM element by its unique ID attribute. It optimally looks for an element that matches the given ID.
   - **Pros**:
     - Performance: Typically faster than `querySelector`, especially when selecting by ID in large documents, as it is a direct lookup.
     - Simplicity: Straightforward usage specifically for ID-based selections.
   - **Cons**:
     - Limited use case: Only works for selecting elements by ID; cannot select elements by other criteria directly.

### Benchmark Results Summary

From the benchmark results:
- **`getElementById` achieved 33,819,700 executions per second**.
- **`querySelector` achieved 21,922,418 executions per second**.

This data suggests that `getElementById` is more efficient in the context of this specific DOM operation on the tested environment (Chrome 140 on Linux). The performance difference indicates that when many elements are being manipulated or accessed frequently by their IDs, opting for `getElementById` could lead to better performance.

### Other Considerations

- **Nature of the Test**: This benchmark is focused solely on performance characteristics and does not encapsulate considerations such as cross-browser compatibility, readability, and maintainability of the code.
  
- **Modern Browsers**: While the test results may vary across different browsers and versions, both methods are generally well-supported in modern browsers. However, performance could be influenced by the browser's engine optimizations and the complexity of the document structure.

### Alternatives

Other selection methods include:

1. **`document.getElementsByClassName`**:
   - Use this method when you need to select multiple elements by class name. 
   - Limited to classes, but it can provide good performance in obtaining nodes in bulk.

2. **`document.querySelectorAll`**:
   - Like `querySelector`, but returns a NodeList of all matching elements instead of a single element. It offers the same flexibility with CSS selectors and may serve well in cases where multiple elements need to be manipulated.

3. **Caching the Results**: For frequently accessed elements, consider caching references to selected elements rather than querying them multiple times. This avoids repeated DOM lookups, which can be especially costly in terms of performance.

In conclusion, choosing the right selection method depends on the specific requirements of your application, balancing performance with flexibility and clarity of your code.

querySelector vs getElementById (version: 1)

Comparing performance of: `querySelector vs getElementById`

Created: 10 months ago by: Registered User

Go to the latest result

querySelector

getElementById

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 6 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

querySelector vs getElementById (version: 1)

Comparing performance of: querySelector vs getElementById

Created: 10 months ago by: Registered User

Go to the latest result

querySelector

getElementById

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 6 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

Related benchmarks

Comparing performance of: `querySelector vs getElementById`