Benchmark: querySelectorAll().forEach vs arrayFrom(getElementsByClassName).forEach

HTML Preparation code:

<div class="name"></div>
<div class="name"></div>
<div class="name"></div>

Tests:

querySelectorAll
document.querySelectorAll(".name").forEach((e, i) => { console.log(e) })
getElementsByClassName
Array.from(document.getElementsByClassName("name")).forEach((e, i) => { console.log(e) })

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:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	72925.6 Ops/sec
getElementsByClassName	54985.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares two ways to iterate over an array of HTML elements: `querySelectorAll()` followed by `.forEach()` vs `getElementsByClassName()` followed by `.forEach()`. The goal is to determine which approach is faster and more efficient.

**Options Compared**

There are only two options being compared:

1. **`querySelectorAll()` followed by `.forEach()`**: This method uses the `Document.querySelectorAll()` API to select all elements with a given CSS selector (`".name"` in this case), and then iterates over the resulting NodeList using `.forEach()`.
2. **`getElementsByClassName()` followed by `.forEach()`**: This method uses the `document.getElementsByClassName()` API to select all elements with a given class name (`"name"` in this case), and then iterates over the resulting HTMLCollection using `.forEach()`.

**Pros and Cons**

Here are some pros and cons of each approach:

**`querySelectorAll()` followed by `.forEach()`:**

Pros:

* More concise and expressive, as it leverages a single API call to select elements.
* May be faster since `querySelectorAll()` is optimized for performance.

Cons:

* Requires two separate calls: one to select elements and another to iterate over them. This may incur additional overhead.
* May require more memory allocation and garbage collection if the resulting NodeList is large.

**`getElementsByClassName()` followed by `.forEach()`:**

Pros:

* Simpler and easier to understand, as it uses a traditional DOM method for element selection.
* May be slower since `document.getElementsByClassName()` can be less optimized than `querySelectorAll()`.

Cons:

* Requires two separate calls: one to select elements and another to iterate over them. This may incur additional overhead.
* May not be as performant as `querySelectorAll()` due to the use of an older API.

**Library Usage**

Both benchmarks rely on standard JavaScript APIs, but they don't require any external libraries. However, if you were to modify these benchmarks to work with a different browser or environment, you might need to consider using additional libraries for compatibility or performance optimization.

**Special JS Features and Syntax**

Neither of the two approaches requires special JavaScript features or syntax. They are straightforward, vanilla JavaScript implementations that should be easily recognizable and maintainable.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* Use `Array.from()` with a CSS selector: This method is similar to `querySelectorAll()`, but uses the new `Array.from()` API to create an array from the DOM elements.
* Use `Element.querySelectorAll()` on individual elements: Instead of selecting all elements at once, you could use `Element.querySelectorAll()` to select elements individually and then iterate over them using `.forEach()`.
* Use a library like Lodash or Ramda for array iteration: These libraries provide optimized and concise ways to iterate over arrays, which might be faster than vanilla JavaScript approaches.

Keep in mind that the best approach will depend on your specific use case, performance requirements, and personal preference.

Related benchmarks:

querySelectorAll().forEach vs arrayFrom(getElementsByClassName).forEach (version: 0)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 7 years ago by: Registered User

Jump to the latest result

querySelectorAll

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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