Benchmark: getElementById, querySelector, window

HTML Preparation code:

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

Tests:

getElementById
document.getElementById("test");
querySelector
document.querySelector("#test")
window
window["test"]
direct
test

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector
window
direct

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 11; SM-A202F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36

Browser/OS: Chrome Mobile 96 on Android

View result in a separate tab

Test name	Executions per second
getElementById	1003084.6 Ops/sec
querySelector	542639.2 Ops/sec
window	496772.2 Ops/sec
direct	300130.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested, compared, and considered.

**What is being tested?**

The benchmark is designed to compare the performance of three different ways to access an HTML element: `getElementById`, `querySelector`, and accessing the window object directly (`window["test"]`). The test also includes a "direct" option, which bypasses JavaScript altogether by using a property access on the `window` object.

**Options being compared**

The benchmark compares the performance of these three options:

1. **getElementById**: This method uses the `document.getElementById()` function to retrieve an element by its ID.
2. **querySelector**: This method uses the `document.querySelector()` function to retrieve an element using a CSS selector.
3. **window["test"]**: This option directly accesses the `test` property on the `window` object, without going through JavaScript.

**Pros and Cons of each approach**

1. **getElementById**:
	* Pros: Widely supported, easy to use, and relatively fast (since it doesn't require parsing a CSS selector).
	* Cons: Can be slower than other methods if the element is not found or is very deep in the DOM.
2. **querySelector**:
	* Pros: More powerful than `getElementById`, allowing for more flexible selection patterns, and can be faster when used correctly.
	* Cons: Requires a CSS selector syntax, which can be verbose and less readable for simple cases.
3. **window["test"]**:
	* Pros: Fastest option since it bypasses JavaScript and directly accesses the `window` object's property.
	* Cons: Only works if the `test` property exists on the `window` object, which may not always be the case.

**Libraries and special JS features**

None of the test cases use any libraries or special JavaScript features. The benchmark focuses solely on the core JavaScript methods for accessing elements.

**Other alternatives**

If the benchmark were to include other options, some potential alternatives could be:

* `document.querySelectorAll()`: Retrieves all elements matching a CSS selector.
* `document.querySelectorAll()`: Similar to `querySelectorAll()`, but returns an HTMLCollection instead of a NodeList.
* Using a CSS query on the element itself (e.g., `element.style.color = 'red'`).
* Using other methods, such as `element.getAttribute('id')` or `element.value`.

However, these alternatives are not currently part of this benchmark.

In summary, this benchmark provides a simple and focused comparison between three common ways to access an HTML element: `getElementById`, `querySelector`, and direct property access on the `window` object.

Related benchmarks:

getElementById, querySelector, window (version: 0)

Comparing performance of: getElementById vs querySelector vs window vs direct

Created: 6 years ago by: Guest

Jump to the latest result

getElementById

querySelector

window

direct

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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