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) })

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

querySelectorAll

53K/s

getElementsByClassName

38K/s

Fastest: querySelectorAll (1.4x faster)

View exact numbers

✓ querySelectorAll: 52,776 ops/sec
• getElementsByClassName: 38,114 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

querySelectorAll

73K/s

getElementsByClassName

55K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	72,926 Ops/sec
getElementsByClassName	54,986 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.

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

Comparing performance of: `querySelectorAll vs getElementsByClassName`

Created: 7 years ago by: Registered User

Go to the latest result

querySelectorAll

getElementsByClassName

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 7 years ago by: Registered User

Go to the latest result

querySelectorAll

getElementsByClassName

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelectorAll vs getElementsByClassName`