Benchmark: querySelectorAll vs. getElementsByClassName with spread

HTML Preparation code:

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

Tests:

querySelectorAll
document.querySelectorAll(".test").forEach(item => console.log(item))
getElementsByClassName
[...document.getElementsByClassName("test")].forEach(item => console.log(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark test case.

**What is being tested?**

This benchmark tests the performance difference between two methods to select and iterate over HTML elements on a webpage:

1. `document.querySelectorAll(".test")`
2. `[...document.getElementsByClassName("test")]`

Both methods aim to select all HTML elements with the class "test" and then log each element to the console using `console.log(item)`.

**What are the options being compared?**

Two DOM (Document Object Model) methods are being compared:

1. **querySelectorAll**: This method returns a NodeList of all elements that match the specified CSS selector (.test). The `[... ]` spread operator is used to convert this NodeList into an Array, allowing for iteration using `forEach`.
2. **getElementsByClassName**: This method returns a live HTMLCollection (an array-like object) of all elements with the specified class name (.test). Again, the `[... ]` spread operator is used to convert this collection into an Array, enabling iteration.

**Pros and Cons**

Here's a brief summary of the pros and cons for each option:

1. **querySelectorAll**:
	* Pros: More flexible CSS selector syntax, allows for more complex selectors (e.g., `.test > .child`).
	* Cons: Slower than `getElementsByClassName` due to the overhead of parsing the CSS selector.
2. **getElementsByClassName**:
	* Pros: Faster and more lightweight since it's specifically designed for class-based selection.
	* Cons: Limited flexibility, only allows for class-based selectors.

**Other Considerations**

* Both methods have their own performance characteristics, but `querySelectorAll` is generally slower than `getElementsByClassName`.
* In this specific test case, `querySelectorAll` performs slightly better on Chrome 96 (12857.66 EPS) compared to `getElementsByClassName` (10091.42 EPS).
* The spread operator (`[... ]`) is used in both methods to convert the NodeList or HTMLCollection into an Array for iteration.

**Other Alternatives**

Some alternative approaches to select and iterate over elements include:

1. **NodeList.prototype.forEach()**: If you're working with a NodeList, you can use its built-in `forEach()` method instead of converting it to an Array using `[... ]`.
2. **Array.from(document.getElementsByClassName("test"))`: Another way to convert the HTMLCollection into an Array for iteration.
3. **For loops and indexing**: While not as elegant, traditional for loops with indexing (e.g., `for (var i = 0; i < document.getElementsByClassName("test").length; i++)`) can also be used.

The library or special JS feature used in this test case is none. The benchmark simply uses built-in JavaScript methods and features to compare the performance of two DOM selection and iteration techniques.

Related benchmarks:

querySelectorAll vs. getElementsByClassName with spread (version: 0)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 5 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):