Benchmark: querySelector vs getElementById

HTML Preparation code:

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

Tests:

querySelector
document.querySelector("#test");
getElementById
document.getElementById("test");

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

getElementById

11.8M/s

querySelector

6.2M/s

Fastest: getElementById (1.9x faster)

View exact numbers

✓ getElementById: 11,849,537 ops/sec
• querySelector: 6,162,148 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: one year ago)

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

getElementById

9.5M/s

querySelector

2.0M/s

View exact numbers

Test name	Executions per second
✓ getElementById	9,480,009 Ops/sec
querySelector	1,991,209 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, the options being compared, pros and cons of each approach, and other considerations.

**What is being tested?**

The benchmark compares two ways to select an HTML element in JavaScript:

1. `document.querySelector("#test");`
2. `document.getElementById("test");`

These two methods are used to retrieve an element from a DOM document using a CSS selector or an ID.

**Options being compared:**

* `document.querySelector()`: A method that returns the first element matching the specified CSS selector.
* `document.getElementById()`: A method that returns the element with the specified ID.

**Pros and Cons of each approach:**

1. **`document.querySelector()`**:
	* Pros:
		+ More flexible than `getElementById`, as it allows selecting elements based on CSS selectors, making it easier to write generic code.
		+ Can be used for more complex selections (e.g., multiple elements, class names).
	* Cons:
		+ May return null if no element matches the selector.
2. **`document.getElementById()`**:
	* Pros:
		+ Faster and more efficient than `querySelector`, as it directly accesses an element by its ID.
		+ More predictable results.
	* Cons:
		+ Less flexible, as it only allows selecting elements by their ID.

**Library used:**

None, as both methods are part of the standard JavaScript DOM API.

**Special JS feature or syntax:**

None mentioned.

**Benchmark preparation code and HTML:**

The benchmark uses a simple HTML element (`<div id="test"></div>`) created using JavaScript's `HtmlPreparationCode` attribute. This allows the benchmark to run multiple times with the same HTML setup, reducing the overhead of creating and destroying elements.

**Other alternatives:**

* Other CSS selectors that can be used with `document.querySelector()` include:
	+ Class names (e.g., `.class-name`)
	+ Tag names (e.g., `div`)
	+ Combinators (e.g., `>`, `~`)
	+ Pseudo-class and pseudo-element selectors (e.g., `:hover`, `::before`)

Keep in mind that these alternatives may introduce additional overhead or variations in performance, depending on the specific use case.

In general, when choosing between `document.querySelector()` and `document.getElementById()`, consider the following:

* Use `querySelector()` for more complex selections or when you need to select multiple elements.
* Use `getElementById()` when you know the exact ID of the element you're trying to retrieve.

querySelector vs getElementById (version: 0)

Comparing performance of: `querySelector vs getElementById`

Created: 9 years ago by: Registered User

Go to the latest result

querySelector

getElementById

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

querySelector vs getElementById (version: 0)

Comparing performance of: querySelector vs getElementById

Created: 9 years ago by: Registered User

Go to the latest result

querySelector

getElementById

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `querySelector vs getElementById`