Benchmark: NodeList For vs Foreach--

Script Preparation code:

var div = document.createElement('div');
for (let i = 0; i < 1000; i++) {
    div.insertAdjacentHTML('beforeend', `<span>span-${i}<span>`);
}

var list = div.querySelectorAll('span');

Tests:

Default For
for(let i = 0; i < list.length; i++) { list[i].setAttribute('tabindex', '-1'); }
For with length caching
list.forEach(item =>{ item.setAttribute('tabindex', '-1'); });
forEach
for(let i = 0, lenght = list.length ; i < length; i++) { list[i].setAttribute('tabindex', '-1'); }
for of
for (let el of div.querySelectorAll('span')){ el.setAttribute('tabindex', '-1'); }
for of 2
for (let el of list){ el.setAttribute('tabindex', '-1'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Default For
For with length caching
forEach
for of
for of 2

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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.

**Benchmark Overview**

The provided JSON represents a benchmarking test case, where users can compare the performance of different approaches for iterating over an array-like object (NodeList) in JavaScript. The test case uses the `insertAdjacentHTML` method to create an HTML div element with 1000 child span elements, which is then queried using `querySelectorAll`. Each test case applies a different iteration approach to set the `tabindex` attribute on each element.

**Iteration Approaches**

The benchmark compares four iteration approaches:

1. **Default For**: Iterates over the NodeList using a traditional for loop, without caching the length of the array.
2. **For with Length Caching**: Iterates over the NodeList using a for loop with caching the length of the array.
3. **ForEach**: Uses the `forEach` method to iterate over the NodeList, which is optimized for performance.
4. **For of**: Iterates over the NodeList using a for...of loop.

**Pros and Cons**

* **Default For**:
	+ Pros: Simple to understand, easy to implement.
	+ Cons: May be slower due to the overhead of checking the length of the array on each iteration.
* **For with Length Caching**:
	+ Pros: Can be faster than Default For by avoiding the length check on each iteration.
	+ Cons: Requires calculating the length of the array upfront, which may not always be necessary.
* **ForEach**:
	+ Pros: Optimized for performance, uses a single pass through the array.
	+ Cons: Less intuitive for developers who are not familiar with the `forEach` method.
* **For of**:
	+ Pros: Similar to traditional for loops, easy to understand and implement.
	+ Cons: May be slower than For with Length Caching due to the overhead of creating a new iterator object.

**Library and Syntax**

The benchmark uses the `insertAdjacentHTML` method to create an HTML div element, which is not a standard JavaScript library. This method is supported by most modern browsers, but may not work in older versions.

There are no special JS features or syntax used in this benchmark. The code is straightforward and easy to understand.

**Alternative Approaches**

Other iteration approaches that could be tested include:

* Using `Array.prototype.forEach` with a callback function.
* Using `Array.prototype.map` with a single-element array as the output.
* Using a custom iterator implementation using a generator function or an arrow function.

These alternative approaches could provide additional insights into performance differences between different iteration methods.

Related benchmarks:

NodeList For vs Foreach-- (version: 0)

Comparing performance of: Default For vs For with length caching vs forEach vs for of vs for of 2

Created: 3 years ago by: Guest

Jump to the latest result

Default For

For with length caching

forEach

for of

for of 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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