Benchmark: querySelector vs. getElementById Performance

HTML Preparation code:

<div id="el"></div>

Tests:

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

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 15 runs

getElementById

35.1M/s

querySelector

9.3M/s

Fastest: getElementById (3.8x faster)

View exact numbers

✓ getElementById: 35,096,184 ops/sec
• querySelector: 9,311,629 ops/sec

Firefox 5 runs

getElementById

4.3M/s

querySelector

3.0M/s

Fastest: getElementById (1.4x faster)

View exact numbers

✓ getElementById: 4,333,990 ops/sec
• querySelector: 3,038,516 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: 6 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.6.2 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

getElementById

87.8M/s

querySelector

15.1M/s

View exact numbers

Test name	Executions per second
✓ getElementById	87,824,600 Ops/sec
querySelector	15,145,370 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.

**Benchmark Definition and Purpose**

The provided JSON represents a JavaScript microbenchmark that compares the performance of two DOM manipulation methods: `getElementById` and `querySelector`. The benchmark aims to measure which method is faster for retrieving an element by its ID or class name, respectively.

**Script Preparation Code and Html Preparation Code**

The script preparation code is empty, which means that no additional setup or initialization code is required before running the benchmark. However, it's worth noting that some benchmarks might require setting up variables, importing libraries, or defining functions to isolate the test case.

The HTML preparation code creates a simple HTML element with an ID of "el", which will be used as the target element for both `getElementById` and `querySelector`.

**Individual Test Cases**

There are two individual test cases:

1. **getElementById**: This test case uses the `getElementById` method to retrieve the element by its ID ("el") and then extracts the class name from the resulting element.
2. **querySelector**: This test case uses the `querySelector` method to retrieve the element by its class name ("el") and then extracts the class name from the resulting element.

**Library and Purpose**

In this benchmark, there are no external libraries being used beyond what's inherently part of the JavaScript language and the DOM API. However, it's worth noting that some benchmarks might use libraries like `benchmark` or `microbenchmark` to handle benchmarking logic, timing measurements, and reporting.

**Special JS Feature or Syntax**

Neither `getElementById` nor `querySelector` uses any special features or syntax specific to modern JavaScript. Both are part of the standard DOM API and have been supported for a long time.

**Pros and Cons of Different Approaches**

Here's a brief summary:

* **getElementById**: Pros:
	+ Generally faster than `querySelector` because it only searches for an exact match.
	+ More efficient when working with IDs that are unique within the document.
Cons:
	+ Less flexible since it only works with IDs, not class names or other selectors.
* **querySelector**: Pros:
	+ More versatile and flexible since it can work with multiple selectors (class names, ID, etc.).
Cons:
	+ Generally slower than `getElementById` because it has to search for a match using a selector.

**Other Alternatives**

If you're interested in exploring alternative DOM manipulation methods or performance benchmarks, here are some options:

* `querySelectorAll`: Similar to `querySelector`, but returns all matching elements instead of a single one.
* `getElementsByClassName`: Retrieves elements by their class name(s) and returns an array of matched elements.
* `getElementByAttribute`: Retrieves elements by a specific attribute value (e.g., `getAttribute` or `setAttribute`).
* Microbenchmarking libraries like `benchmark`, `microbenchmark`, or `fast benchmark` can be used to create and run more complex benchmarks.

Keep in mind that the choice of approach depends on the specific use case and performance requirements.

querySelector vs. getElementById Performance (version: 0) Benchmark.js

https://ahmedbouchefra.com

Comparing performance of: `getElementById vs querySelector`

Created: 6 years ago by: Registered User

Go to the latest result

getElementById

querySelector

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 15 runs

Firefox 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 Performance (version: 0) Benchmark.js

https://ahmedbouchefra.com

Comparing performance of: getElementById vs querySelector

Created: 6 years ago by: Registered User

Go to the latest result

getElementById

querySelector

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 15 runs

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