Benchmark: forEach vs Array.from vs spread operator on nodelist

HTML Preparation code:

<div class="selectMe"></div>
<div class="selectMe"></div>
<div class="selectMe"></div>
<div class="selectMe"></div>
<div class="selectMe"></div>

Script Preparation code:

$iterations = 500;
$divs = document.querySelectorAll('.selectMe');

Tests:

forEach
for (let j=0; j<$iterations; ++j) { $divs.forEach((el, i) => { el.innerHTML = 0; }) }
Array.from
for (let j=0; j<$iterations; ++j) { Array.from($divs).every((el, i) => { el.innerHTML = 0; return true; }) }
Spread operator
for (let j=0; j<$iterations; ++j) { [...$divs].every((el, i) => { el.innerHTML = 0; return true; }) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
Array.from
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
forEach	304.2 Ops/sec
Array.from	272.1 Ops/sec
Spread operator	271.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Goal**

The goal is to measure the performance of three different approaches for iterating over an HTML NodeList:

1. `forEach`
2. `Array.from` with `every` method
3. Spread operator (`[...]`) with `every` method

**Options Compared**

Each option is being tested against each other, which means we have multiple iterations of each test case.

**Pros and Cons of Each Approach:**

1. **forEach**
	* Pros:
		+ Simple to use
		+ Works well for small datasets
	* Cons:
		+ Can be slower than other options for large datasets
2. **Array.from with every method**
	* Pros:
		+ More memory-efficient than `forEach`
		+ Fast and scalable
	* Cons:
		+ Requires creating an Array, which can be slow for small datasets
3. **Spread operator with every method**
	* Pros:
		+ Memory-efficient like `Array.from`, but uses spread operator syntax
		+ Fast and scalable

**Library/ Framework Used**

In this benchmark, the `every` method is used from the Array prototype in JavaScript.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's standard for iterating over NodeList. However, it's worth noting that the spread operator (`[...]`) was introduced in ECMAScript 2015 (ES6) and is not supported in older browsers like Firefox 123.

**Other Alternatives**

For comparison, other approaches could be:

1. Using `for...of` loop
2. Using a traditional `for` loop with indexing
3. Using other libraries or frameworks for iteration (e.g., Lodash)

These alternatives might offer different performance characteristics, and the benchmark would need to test them accordingly.

Overall, this benchmark provides a useful comparison of three common approaches for iterating over NodeList in JavaScript, helping users understand which method is best suited for their use case.

Related benchmarks:

forEach vs Array.from vs spread operator on nodelist (version: 0)

forEach vs Array.from (with every) vs spread operator (with every) on nodelist

Comparing performance of: forEach vs Array.from vs Spread operator

Created: 2 years ago by: Guest

Jump to the latest result

forEach

Array.from

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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