Benchmark: querySelector vs getElementById & getElementsByClassName

HTML Preparation code:

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

Tests:

query selector
document.querySelector('#test .test')
id & class
document.getElementById('test').getElementsByClassName('test')

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

query selector

5.6M/s

id & class

4.1M/s

Fastest: query selector (1.4x faster)

View exact numbers

✓ query selector: 5,620,680 ops/sec
• id & class: 4,074,506 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
query selector
id & class

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; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

id & class

13.3M/s

query selector

5.6M/s

View exact numbers

Test name	Executions per second
✓ id & class	13,302,060 Ops/sec
query selector	5,618,071 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's being tested.

**Benchmark Definition**

The benchmark defines two test cases:

1. `document.querySelector('#test .test')`: This line of code uses the `querySelector` method to select an HTML element with the id "test" that contains another element with the class "test".
2. `document.getElementById('test').getElementsByClassName('test')`: This line of code first retrieves an HTML element with the id "test" using `getElementById`, and then calls the `getElementsByClassName` method to retrieve all elements with the class "test".

**Options Compared**

The two test cases are comparing the performance of `querySelector` vs. `getElementById` + `getElementsByClassName`. This is a common scenario, as it's often used in web development to select elements based on their IDs and classes.

**Pros and Cons of Each Approach**

1. **querySelector**:
	* Pros: Faster and more efficient, especially when dealing with complex selectors.
	* Cons: Can be slower for simple cases, and may not work well with older browsers that don't support it.
2. **getElementById & getElementsByClassName**:
	* Pros: Works in all modern browsers, even those that don't support `querySelector`.
	* Cons: Typically slower than `querySelector`, especially when dealing with complex selectors.

**Library**

None of the test cases use any external libraries. The code is pure JavaScript, leveraging the built-in DOM methods to select elements.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax being used in this benchmark. It's a straightforward comparison of two common DOM selection methods.

**Other Alternatives**

If you wanted to add more complexity to your benchmark, you could consider testing other options, such as:

* Using `querySelectorAll` instead of `querySelector`
* Comparing the performance of different CSS selectors (e.g., `>`, `+`, `~`)
* Testing the performance of using `document.querySelector` vs. `querySelector` with a specific selector
* Adding more complex HTML structures to test the performance of these methods in different scenarios

Keep in mind that adding more complexity to your benchmark can make it harder to understand and interpret the results, so it's essential to strike a balance between relevance and simplicity.

querySelector vs getElementById & getElementsByClassName (version: 0)

Comparing performance of: `query selector vs id & class`

Created: 6 years ago by: Guest

Go to the latest result

query selector

id & class

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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 & getElementsByClassName (version: 0)

Comparing performance of: query selector vs id & class

Created: 6 years ago by: Guest

Go to the latest result

query selector

id & class

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `query selector vs id & class`