Benchmark: getElementById - querySelector

Script Preparation code:

for (i = 0; i < 10000; i++) {
	const _div = document.createElement('div')
    const _id = `idx_${i}`
    _div.id = _id
}

Tests:

getElementById
for (i = 0; i < 10000; i++) { const _id = `idx_${i}` div = document.getElementById(_id) }
querySelector
for (i = 0; i < 10000; i++) { const _id = `idx_${i}` div = document.querySelector(`#${_id}`) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 14; Mobile; rv:129.0) Gecko/129.0 Firefox/129.0

Browser/OS: Firefox Mobile 129 on Android

View result in a separate tab

Test name	Executions per second
getElementById	261.7 Ops/sec
querySelector	147.8 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 benchmark JSON and explain what is being tested, compared, and the pros and cons of each approach.

**Benchmark Definition**
The benchmark definition is a JSON object that defines a test case for measuring the performance of two different approaches: `getElementById` and `querySelector`. The script preparation code creates an array of 10,000 HTML elements with unique IDs (`idx_0` to `idx_9`). This creates a large dataset for testing.

**Script Preparation Code**
The script preparation code is:
```javascript
for (i = 0; i < 10000; i++) {
    const _div = document.createElement('div');
    const _id = `idx_${i}`;
    _div.id = _id;
}
```
This code creates a new HTML element (`div`) and assigns it a unique ID for each iteration of the loop.

**Html Preparation Code**
The html preparation code is null, meaning no additional HTML elements are created or modified outside of the script preparation code.

**Individual Test Cases**
There are two test cases:

1. **getElementById**: This test case measures the performance of using `document.getElementById` to retrieve an element by its ID.
```javascript
for (i = 0; i < 10000; i++) {
    const _id = `idx_${i}`;
    div = document.getElementById(_id);
}
```
2. **querySelector**: This test case measures the performance of using `document.querySelector` to retrieve an element by its ID or by a CSS selector.
```javascript
for (i = 0; i < 10000; i++) {
    const _id = `idx_${i}`;
    div = document.querySelector(`#${_id}`);
}
```
**Library: Document Query API**
Both test cases use the Document Query API, which is a set of APIs for querying and manipulating HTML documents. Specifically, `document.getElementById` and `document.querySelector` are two functions within this API.

The Document Query API provides several benefits, including:

* Efficient element lookup
* Support for CSS selectors
* Ability to retrieve elements by their attributes

However, the API can also have some drawbacks, such as:

* Potential performance overhead due to DOM manipulation
* Limited support for certain types of queries (e.g., attribute-based queries)

**Special JS Feature: None**
There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

For element lookup and manipulation, other alternatives include:

* `document.getElementsByClassName`: Retrieves elements by their class name.
* `document.getElementsByTagName`: Retrieves elements by their tag name.
* `Array.prototype.indexOf` and `Array.prototype.lastIndexOf`: Use the DOM to retrieve an element by its index.
* Custom solutions using libraries like jQuery or Lodash.

Note that each alternative has its own trade-offs in terms of performance, compatibility, and syntax complexity.

Related benchmarks:

getElementById - querySelector (version: 0)

Yo

Comparing performance of: getElementById vs querySelector

Created: one year ago by: Registered User

Jump to the latest result

getElementById

querySelector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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