Benchmark: querySelectorAll.forEach() vs [...getElementsByClassName].forEach()

HTML Preparation code:

<div class="test">
    <div class="saufdzgzg">
        <div class="test"></div>
    </div>
    <div class="dsfdf">
        <div class="test">
            <div class="sd"></div>
        </div>
    </div>
</div>

Tests:

querySelectorAll.forEach()
document.querySelectorAll(".test").forEach((element) => element.classList.add("nottest"));
[...getElementsByClassName].forEach()
[...document.getElementsByClassName("test")].forEach((element) => element.classList.add("nottest"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll.forEach()
[...getElementsByClassName].forEach()

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

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
querySelectorAll.forEach()	1393709.4 Ops/sec
[...getElementsByClassName].forEach()	1680963.0 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 this benchmark.

The test is comparing two approaches:

1. `querySelectorAll.forEach()`
2. `[...getElementsByClassName].forEach()` (also known as the spread operator method)

Both methods aim to add a class "nottest" to every element with the class "test".

**Options Compared:**

* **`querySelectorAll` vs `[...getElementsByClassName]`**: Both methods are used to get elements that match a certain selector. `querySelectorAll` is a native DOM method, while `[...getElementsByClassName]` uses the spread operator to convert the result into an array.
* **Native DOM method (`querySelectorAll`) vs Spread Operator method ([...getElementsByClassName].forEach())**: The spread operator method is a more modern approach that allows for concise syntax, but might incur performance overhead due to its creation of an array.

**Pros and Cons:**

* **`querySelectorAll`**:
	+ Pros: Native DOM method, well-supported across browsers.
	+ Cons: Might be slower due to the need to parse the CSS selector.
* **[...getElementsByClassName].forEach()]**: 
	+ Pros: Concise syntax, can be faster due to fewer DOM traversals (since it directly uses an array).
	+ Cons: May not work in older browsers or those that don't support the spread operator.

**Library/Functionality Used:**

* None mentioned. Both methods rely solely on built-in JavaScript features and DOM APIs.

**Special JS Feature/Syntax:**

* The spread operator `[...getElementsByClassName]` is a recent feature introduced in ECMAScript 2015 (ES6). It allows for converting the result of `getElementsByClassName` directly into an array, making it more concise than the traditional `Array.prototype.slice.call()` method.

**Benchmark Considerations:**

The benchmark compares two methods that have different performance characteristics. Since both methods aim to achieve a similar goal, the results will likely show which approach is faster and more efficient in this specific use case.

As for alternatives, if you were to implement these tests yourself, you might consider:

* Using `getElementsById` instead of `getElementsByClassName`, as it's often faster due to its direct access to elements.
* Comparing the performance of different CSS selectors (e.g., `.test` vs `.saufdzgzg`) using both methods.

However, without further modifications to the benchmark, these alternatives won't directly impact the results.

Related benchmarks:

querySelectorAll.forEach() vs [...getElementsByClassName].forEach() (version: 0)

Comparing performance of: querySelectorAll.forEach() vs [...getElementsByClassName].forEach()

Created: 4 years ago by: Guest

Jump to the latest result

querySelectorAll.forEach()

[...getElementsByClassName].forEach()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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