Benchmark: querySelector vs querySelectorAll simple 2

HTML Preparation code:

<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test321312"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test3213123"></div>
<div class="test pipoca"></div>
<div class="test"></div>
<div class="test dsadsadas"></div>
<div class="test sadasds"></div>
<div class="test lalalala"></div>
<div class="test"></div>
<div class="test sadasdasd"></div>

Tests:

querySelector
document.querySelector(".test.pipoca")
querySelectorAll
document.querySelectorAll(".test.pipoca")
ByClassName
document.getElementsByClassName("test pipoca")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
querySelectorAll
ByClassName

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/124.0.0.0 YaBrowser/24.6.0.0 Safari/537.36

Browser/OS: Yandex Browser 24 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	2450096.0 Ops/sec
querySelectorAll	1334047.9 Ops/sec
ByClassName	6586846.5 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 definition and results.

**Benchmark Definition:**

The benchmark consists of three individual test cases:

1. `document.querySelector(".test.pipoca")`: This test case uses the `querySelector` method to select an element with the class `test.pipoca`.
2. `document.querySelectorAll(".test.pipoca")`: This test case uses the `querySelectorAll` method to select all elements with the class `test.pipoca`.
3. `document.getElementsByClassName("test pipoca")`: This test case uses the `getElementsByClassName` method to select all elements with the class `test pipoca`. Note that this method is not supported in modern browsers, and it's likely used for compatibility purposes.

**Options being compared:**

The benchmark compares three different methods:

1. `querySelector`: A DOM querying method that returns a single element matching the specified selector.
2. `querySelectorAll`: A DOM querying method that returns a NodeList containing all elements matching the specified selector.
3. `getElementsByClassName` (Deprecated): An older method for selecting elements by class name.

**Pros and Cons:**

1. **querySelector**:
	* Pros: Fast, efficient, and widely supported in modern browsers.
	* Cons: May not return results if no element matches the selector.
2. **querySelectorAll**:
	* Pros: Returns all matching elements, which can be useful for certain use cases.
	* Cons: Can be slower than `querySelector` because it needs to iterate over all matching elements.
3. **getElementsByClassName (Deprecated)**:
	* Pros: None notable in this context.
	* Cons: This method is older and less efficient than the other two, but might still be required for compatibility reasons.

**Library used:**

None of the test cases explicitly uses a library. However, `querySelectorAll` and `getElementsByClassName` are part of the DOM API, which is built into modern browsers.

**Special JS feature or syntax:**

There's no special JavaScript feature or syntax mentioned in this benchmark. It only relies on standard DOM querying methods.

**Other alternatives:**

If you wanted to measure performance for other query methods, here are some examples:

* `document.getElementsByTagName`: Similar to `getElementsByClassName`, but it returns a HTMLCollection (an array-like object) instead of a NodeList.
* `document.querySelectorAll([selector])` with multiple selectors separated by spaces: This would return all elements matching any of the specified selectors.

Keep in mind that these alternatives might not be as efficient or widely supported as the methods used in this benchmark.

Related benchmarks:

querySelector vs querySelectorAll simple 2 (version: 0)

Comparing performance of: querySelector vs querySelectorAll vs ByClassName

Created: 3 years ago by: Guest

Jump to the latest result

querySelector

querySelectorAll

ByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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