Benchmark: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID with lots of elements

HTML Preparation code:

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

Tests:

querySelector
document.querySelector(".test")
querySelectorAll
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName(".test")
querySelector (ID)
document.querySelector("#test")
getElementsByID
document.getElementById("test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
querySelectorAll
getElementsByClassName
querySelector (ID)
getElementsByID

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	3706915.2 Ops/sec
querySelectorAll	844793.2 Ops/sec
getElementsByClassName	4773760.5 Ops/sec
querySelector (ID)	2711151.0 Ops/sec
getElementsByID	4158178.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark tests four different ways to select HTML elements from a DOM tree: `document.querySelector`, `document.querySelectorAll`, `document.getElementsByClassName`, and `document.getElementById`. There are two variations of each method:

1. Without an ID attribute (e.g., `.test`)
2. With an ID attribute (e.g., `#test`)

**Options Compared**

The benchmark compares the performance of these four methods with their respective ID-based variants.

* `querySelector` vs `querySelectorAll`
	+ `querySelector` is used to select a single element based on a CSS selector.
	+ `querySelectorAll` returns all elements that match the CSS selector, even if only one element exists.
* `getElementsByClassName` vs `document.getElementById`
	+ `getElementsByClassName` returns a live HTMLCollection of elements with the specified class name.
	+ `document.getElementById` returns a single element with the specified ID attribute.

**Pros and Cons**

Here's a brief summary of each method:

1. **`document.querySelector`**: Fast, but can return null if no matching element is found.
2. **`document.querySelectorAll`**: Can be slow for large number of matching elements, as it returns a live HTMLCollection.
3. **`getElementsByClassName`**: Returns all elements with the specified class name, which can be useful when multiple classes are used.
4. **`document.getElementById`**: Fast and efficient, but only works with ID attributes.

**Other Considerations**

* `querySelectorAll` is slower than other methods for large numbers of matching elements because it has to parse the entire DOM tree.
* `getElementsByClassName` can be slower than `document.querySelector` if no elements have the specified class name.

**Library and Syntax**

None of the benchmarked methods use external libraries. However, some browsers may use polyfills or native implementations for these APIs.

**Special JS Features**

There are no special JavaScript features used in this benchmark.

**Alternatives**

Other alternatives to test might include:

1. Using `document.querySelectorAll` with a more specific selector (e.g., `.test:contains("hello")`) to test its performance.
2. Adding more elements to the DOM tree using JavaScript to increase the number of matching elements for `getElementsByClassName`.
3. Using a different browser or version to compare performance across different platforms.

Overall, this benchmark provides a good starting point to understand the relative performance of these four methods in selecting HTML elements from the DOM tree.

Related benchmarks:

querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID with lots of elements (version: 0)

Comparing performance of: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID

Created: 2 years ago by: Guest

Jump to the latest result

querySelector

querySelectorAll

getElementsByClassName

querySelector (ID)

getElementsByID

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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