Benchmark: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID 20x

HTML Preparation code:

<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div><div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	4615994.5 Ops/sec
querySelectorAll	967494.5 Ops/sec
getElementsByClassName	5808707.0 Ops/sec
querySelector (ID)	3381791.0 Ops/sec
getElementsByID	5656210.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmarking test, specifically comparing the performance of different DOM querying methods in modern web browsers.

**What is tested:**

The benchmark tests five different DOM querying methods:

1. `document.querySelector(".test")`: selects an element by its class name using the `querySelector` method.
2. `document.querySelectorAll(".test")`: selects all elements by their class name using the `querySelectorAll` method.
3. `document.getElementsByClassName("test")`: selects all elements by their class name using the `getElementsByClassName` method (which is deprecated in favor of `querySelectorAll`).
4. `document.querySelector("#test")`: selects an element by its ID using the `querySelector` method.
5. `document.getElementById("test")`: selects an element by its ID using the `getElementById` method.

**Options compared:**

The benchmark compares the performance of each method in terms of the number of executions per second (FPS).

**Pros and cons of each approach:**

1. **`document.querySelector(".test")`**: This method is the most commonly used way to select elements by class name. It's efficient, but it may not work as expected if there are multiple elements with the same class name.
	* Pros: Easy to use, widely supported.
	* Cons: May not work correctly for multiple elements with the same class name.
2. **`document.querySelectorAll(".test")`**: This method is similar to `querySelector`, but it returns a NodeList of all matching elements. It's more efficient than `getElementsByClassName`.
	* Pros: Returns all matching elements, efficient.
	* Cons: May be slower for very large sets of elements.
3. **`document.getElementsByClassName("test")`**: This method is deprecated in favor of `querySelectorAll`. It's less efficient and may not work correctly if the class name contains spaces or special characters.
	* Pros: None.
	* Cons: Deprecate, inefficient, may not work correctly.
4. **`document.querySelector("#test")`**: This method selects an element by its ID using the `querySelector` method. It's efficient, but it only returns one element if there are multiple elements with the same ID.
	* Pros: Efficient, easy to use.
	* Cons: Only returns one element if there are multiple with the same ID.
5. **`document.getElementById("test")`**: This method selects an element by its ID using the `getElementById` method. It's efficient and returns only one element.
	* Pros: Efficient, returns only one element.
	* Cons: None.

**Library and purpose:**

No specific library is used in this benchmark. However, some libraries like jQuery use these DOM querying methods extensively.

**Special JS feature or syntax:**

None of the tested methods rely on any special JavaScript features or syntax beyond standard DOM manipulation techniques.

**Other alternatives:**

There are other ways to select elements in modern web browsers, such as:

* Using CSS selectors (e.g., `document.querySelector("div.test")`)
* Using query builders like `querySelector` with custom selectors
* Using more advanced selection methods like `querySelectorAll` with a filter function

Keep in mind that these alternatives may have different performance characteristics or use cases compared to the tested methods.

Related benchmarks:

querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID 20x (version: 0)

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

Created: one year 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):