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

HTML Preparation code:

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

Tests:

querySelectorAll foreach
var test = document.querySelectorAll(".test"); test.forEach(el => { var t = el; });
getElementsByClassName [].forEach.call()
var test = document.getElementsByClassName("test"); [].forEach.call(test, el => { var t = el; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 81 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll foreach	213875.6 Ops/sec
getElementsByClassName [].forEach.call()	231033.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

The benchmark compares two approaches to iterate over an HTML collection of elements with the class `test`. The two approaches are:

1. `querySelectorAll` followed by `forEach`
2. `getElementsByClassName` followed by `.forEach.call()`

**Option 1: `querySelectorAll` followed by `forEach`**

In this approach, `querySelectorAll` is used to select all elements with the class `test`. The resulting NodeList (a collection of nodes without a length property) is then iterated over using `forEach`. Inside the callback function, each element is assigned to a variable `t`.

**Pros:**

* Efficient way to iterate over an HTML collection
* Does not require additional DOM manipulation or library calls

**Cons:**

* May have performance overhead due to the need to create a NodeList and then iterate over it
* May not be as efficient as native JavaScript methods for certain use cases

**Option 2: `getElementsByClassName` followed by `.forEach.call()`**

In this approach, `getElementsByClassName` is used to select all elements with the class `test`. The resulting HTMLCollection (a collection of nodes with a length property) is then iterated over using `.forEach.call()`, which converts the HTMLCollection to an array-like object that can be iterated over.

**Pros:**

* May have performance overhead due to the need to convert an HTMLCollection to an array-like object
* Does not require additional DOM manipulation or library calls

**Cons:**

* Requires a call to `.forEach.call()` to iterate over the collection, which adds complexity
* May not be as efficient as native JavaScript methods for certain use cases

In the provided benchmark result, `getElementsByClassName` followed by `.forEach.call()` appears to outperform `querySelectorAll` followed by `forEach`. However, it's essential to note that this may vary depending on the specific use case and browser.

The benchmark uses the Chrome 81 browser and a Windows Desktop device. The test is executed 231033.71875 times per second for `getElementsByClassName` and 213875.5625 times per second for `querySelectorAll` followed by `forEach`.

It's worth noting that this benchmark does not consider other factors that may affect performance, such as:

* Browser version and patch level
* System resources (CPU, RAM, etc.)
* Network conditions
* HTML document complexity

Other alternatives to these approaches include:

* Using a library like jQuery or React that provides optimized methods for iterating over DOM collections
* Using a native JavaScript method like `Array.prototype.forEach()` or `Array.from()`
* Using a specialized library or framework that optimizes performance for specific use cases (e.g., Canvas, WebGL)

In summary, the benchmark compares two approaches to iterate over an HTML collection with class `test`. While there are pros and cons to each approach, the results suggest that `getElementsByClassName` followed by `.forEach.call()` may be more efficient in this particular scenario. However, it's essential to consider other factors that may affect performance when choosing a method for your specific use case.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

querySelectorAll foreach

getElementsByClassName [].forEach.call()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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