Benchmark: getElementById vs querySelector

HTML Preparation code:

<div id="testElement"></div>

Tests:

getElementById
var el = document.getElementById('testElement'); var className = el.className;
querySelector
var el = document.querySelector('#testElement'); var className = el.className;

Historical Performance Data aggregated from 370 community runs

Desktop Results:

Chrome 213 runs

getElementById

14.0M/s

querySelector

5.0M/s

Fastest: getElementById (2.8x faster)

View exact numbers

✓ getElementById: 13,969,324 ops/sec
• querySelector: 5,045,591 ops/sec

Firefox 91 runs

getElementById

6.0M/s

querySelector

3.7M/s

Fastest: getElementById (1.6x faster)

View exact numbers

✓ getElementById: 5,978,206 ops/sec
• querySelector: 3,741,234 ops/sec

Safari 16 runs

getElementById

50.7M/s

querySelector

6.8M/s

Fastest: getElementById (7.5x faster)

View exact numbers

✓ getElementById: 50,651,872 ops/sec
• querySelector: 6,755,152 ops/sec

Other 9 runs

getElementById

16.6M/s

querySelector

3.6M/s

Fastest: getElementById (4.6x faster)

View exact numbers

✓ getElementById: 16,614,488 ops/sec
• querySelector: 3,641,440 ops/sec

Mobile Results:

Chrome 23 runs

getElementById

4.9M/s

querySelector

3.0M/s

Fastest: getElementById (1.7x faster)

View exact numbers

✓ getElementById: 4,902,624 ops/sec
• querySelector: 2,962,711 ops/sec

Safari 12 runs

getElementById

17.5M/s

querySelector

5.7M/s

Fastest: getElementById (3.1x faster)

View exact numbers

✓ getElementById: 17,456,438 ops/sec
• querySelector: 5,660,113 ops/sec

Firefox 6 runs

getElementById

4.3M/s

querySelector

3.4M/s

Fastest: getElementById (1.3x faster)

View exact numbers

✓ getElementById: 4,300,507 ops/sec
• querySelector: 3,391,704 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
getElementById
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Linux

View result in a separate tab

getElementById

8.6M/s

querySelector

6.5M/s

View exact numbers

Test name	Executions per second
✓ getElementById	8,590,180 Ops/sec
querySelector	6,467,248 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark and its components.

**Benchmark Definition:**

The provided JSON defines a JavaScript microbenchmark test, specifically comparing two methods for selecting an HTML element by its ID or class name:

1. `getElementById`
2. `querySelector`

These methods are part of the Document Object Model (DOM) and are used to retrieve elements from an HTML document.

**Options Compared:**

The benchmark compares the performance of two options:

1. **`getElementById`**: This method takes an element's ID as a string parameter and returns the corresponding element. It's a traditional way of selecting elements by their ID.
2. **`querySelector`**: This method takes a CSS selector (a string) as an argument and returns the first element that matches the selector.

**Pros and Cons:**

* `getElementById`:
	+ Pros:
		- Easy to use
		- Fast (because it's a native DOM method)
		- Works well for simple cases
	+ Cons:
		- Can be slower than `querySelector` because it uses a linear search algorithm.
		- May not work correctly if the ID is dynamically generated or changed frequently.
* `querySelector`:
	+ Pros:
		- More flexible (can select elements based on multiple conditions)
		- Faster than `getElementById` for larger datasets
	+ Cons:
		- Can be slower in simple cases because it needs to parse and evaluate the CSS selector.
		- May return multiple matching elements if no unique selector is provided.

**Library and Purpose:**

In this benchmark, neither of the methods relies on a specific library. However, `querySelector` does rely on the W3C standard for CSS selectors.

**Special JavaScript Feature or Syntax:**

Neither `getElementById` nor `querySelector` uses any special JavaScript features or syntax that's not widely supported. These methods are part of the DOM API and have been available since the early days of web development.

**Other Alternatives:**

There are other ways to select elements in JavaScript, including:

* `document.getElementsByClassName()`: Similar to `getElementById`, but selects all elements with a given class name.
* `querySelectorAll()`: A method that returns a NodeList (or an HTMLCollection) containing all elements that match the CSS selector.
* Other libraries or frameworks may provide additional methods for selecting elements, such as React's `useRef` and `useState`.

In summary, this benchmark provides a simple comparison between two common methods for selecting elements in JavaScript: `getElementById` and `querySelector`. While both have their pros and cons, `querySelector` is generally faster and more flexible for larger datasets.

getElementById vs querySelector (version: 0)

Comparing performance of: `getElementById vs querySelector`

Created: 8 years ago by: Guest

Go to the latest result

getElementById

querySelector

Historical Performance Data aggregated from 370 community runs

Desktop Results:

Chrome 213 runs

Firefox 91 runs

Safari 16 runs

Other 9 runs

Mobile Results:

Chrome 23 runs

Safari 12 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

getElementById vs querySelector (version: 0)

Comparing performance of: getElementById vs querySelector

Created: 8 years ago by: Guest

Go to the latest result

getElementById

querySelector

Historical Performance Data aggregated from 370 community runs

Desktop Results:

Chrome 213 runs

Firefox 91 runs

Safari 16 runs

Other 9 runs

Mobile Results:

Chrome 23 runs

Safari 12 runs

Firefox 6 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: `getElementById vs querySelector`