Benchmark: for vs foreach DOM elements

HTML Preparation code:

<span id="democlass">
	<h1 class="ob-recIdx-0">Hello World</h1>
    <h1 class="ob-recIdx-1">Hello World</h1>
    <h1 class="ob-recIdx-2">Hello World</h1>
    <h1 class="ob-recIdx-3">Hello World</h1>
    <h1 class="ob-recIdx-4">Hello World</h1>
</span>

Tests:

for
var count = document.querySelectorAll('#democlass h1').length; for (var i = 0; i < count; i++) { //let currentIndex = String(i); var currentElement = document.querySelector('.ob-recIdx-' + i); currentElement.style.visibility = "hidden"; currentElement.classList.add('playerPlay'); }
forEach
var arr = document.querySelectorAll('#democlass h1'); arr.forEach(function(element){ element.style.visibility = "hidden"; element.classList.add('playerPlay'); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
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_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	358582.3 Ops/sec
forEach	473955.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**What is being tested?**

The provided benchmark tests two approaches to iterate over a set of DOM elements: `for` loop and `forEach` method.

**Options compared**

In this benchmark, we have two options:

1. **For Loop**: This is a traditional, manual approach to iterating over an array-like object (in this case, the DOM elements). The loop variable `i` is incremented manually using `i++`.
2. **ForEach Method**: This is a built-in method in JavaScript that iterates over an array-like object and executes a callback function for each element.

**Pros and Cons of each approach**

**For Loop:**

Pros:

* More control over the iteration process
* Can be used with arrays or any other iterable objects

Cons:

* Manual loop variable management can lead to bugs
* May require more code than using `forEach`

**ForEach Method:**

Pros:

* Convenient and easy to use
* Automatic loop variable management
* Less prone to bugs compared to manual loops

Cons:

* Limited control over the iteration process
* Can be slower due to the overhead of method calls

**Library Used**

In this benchmark, the `document.querySelectorAll` function is used to retrieve an array-like object representing the DOM elements. This is a built-in JavaScript library.

**Special JS Feature or Syntax**

There doesn't seem to be any special JavaScript features or syntax being tested in this benchmark. However, it's worth noting that the use of the `let` keyword for variable declaration (e.g., `let currentIndex = String(i);`) is a modern JavaScript feature introduced in ECMAScript 2015.

**Benchmark Preparation Code**

The provided HTML code creates a container element with multiple child elements (`h1` tags), which are used as the test subjects. The `Script Preparation Code` field is empty, but it's likely that any scripts or libraries required for the benchmark will be loaded separately.

**Other Alternatives**

Some alternative approaches to iterating over DOM elements might include:

* Using a `for...of` loop (which is similar to `forEach`, but more concise)
* Using an arrow function (`=>`) with `forEach`
* Creating a custom iterator using `Array.prototype[Symbol.iterator]`
* Using a library like Lodash or Ramda for iteration and manipulation of DOM elements

However, these alternatives are not tested in this benchmark.

Related benchmarks:

for vs foreach DOM elements (version: 0)

Comparing performance of: for vs forEach

Created: 6 years ago by: Guest

Jump to the latest result

for

forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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