Benchmark: querySelector vs getElementById

HTML Preparation code:

<html>
  <body>
    <div id="test2"></div>
    <div id="test"></div>
  </body>
</html>

Tests:

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

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

getElementById

6.5M/s

querySelector

3.7M/s

Fastest: getElementById (1.8x faster)

View exact numbers

✓ getElementById: 6,511,818 ops/sec
• querySelector: 3,685,388 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/132.0.0.0 Whale/4.30.291.11 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

getElementById

14.2M/s

querySelector

6.3M/s

View exact numbers

Test name	Executions per second
✓ getElementById	14,192,413 Ops/sec
querySelector	6,286,954 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**What is being tested?**

The benchmark is comparing two methods for selecting elements from an HTML document:

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

These methods are used to retrieve a DOM element based on its ID.

**Options compared**

Two options are being compared:

* **`querySelector`**: This method uses a CSS selector to find the element. It's more flexible than `getElementById`, as it can be used with classes, IDs, and pseudo-classes.
* **`getElementById`**: This method directly retrieves an element by its ID.

**Pros and cons of each approach**

* **`querySelector`**:
	+ Pros: More flexible, can use CSS selectors, which can reduce the amount of code needed to select elements.
	+ Cons: May be slower than `getElementById` for simple cases, as it needs to parse the selector and find a matching element in the DOM.
* **`getElementById`**:
	+ Pros: Faster for simple cases, as it directly retrieves an element by its ID without parsing a selector.
	+ Cons: Less flexible, can only be used with IDs.

**Library usage**

There is no explicit library mentioned in this benchmark. However, both `querySelector` and `getElementById` are part of the DOM (Document Object Model) API, which is a built-in JavaScript API for manipulating HTML documents.

**Special JS features or syntax**

None are explicitly mentioned in this benchmark.

**Other alternatives**

If you wanted to compare other methods for selecting elements, some alternatives could include:

* **`querySelectorAll`**: This method returns all elements that match the specified CSS selector. It's often used with `querySelector` to get a list of matching elements.
* **`getElementsByClassName`**: This method returns an array of elements that have the specified class name.

Keep in mind that each of these methods has its own pros and cons, and may be more or less suitable depending on your specific use case.

querySelector vs getElementById (version: 0)

Test the performance of the default Javascript querySelector vs the getElementById method.

Comparing performance of: `querySelector vs getElementById`

Created: 9 years ago by: Guest

Go to the latest result

querySelector

getElementById

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 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)

Test the performance of the default Javascript querySelector vs the getElementById method.

Comparing performance of: querySelector vs getElementById

Created: 9 years ago by: Guest

Go to the latest result

querySelector

getElementById

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 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`