Benchmark: NodeList For vs Foreach123

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(const elem of list) { elem.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

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 break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different approaches for iterating over an array in JavaScript:

1. **For loop**: Using traditional `for` loops with `length` property checks.
2. **For...of loop**: Using the newer `for...of` loop syntax, which automatically caches the length of the array.
3. **Array.prototype.forEach()**: Using the `forEach()` method provided by the Array prototype.

**Options Compared**

The three options are compared in terms of their execution speed, measured in executions per second (EPS).

**Pros and Cons of Each Approach**

1. **For loop**
	* Pros:
		+ Widely supported and well-established.
	* Cons:
		+ Requires manual length checks, which can be slower due to the overhead of the `length` property access.
2. **For...of loop**
	* Pros:
		+ Automatically caches the length of the array, reducing the overhead of subsequent checks.
		+ More concise and readable code.
	* Cons:
		+ Not all older browsers support this syntax (e.g., Internet Explorer).
3. **Array.prototype.forEach()**
	* Pros:
		+ Convenient and concise way to iterate over arrays.
		+ Typically faster than traditional `for` loops due to optimized implementation.
	* Cons:
		+ May incur additional overhead for array creation or modification.

**Library Usage**

None of the test cases use any external libraries, so there's no library-related considerations.

**Special JS Feature/Syntax**

The benchmark uses modern JavaScript features:

1. **Template literals**: Used in the `insertAdjacentHTML` method to create HTML strings.
2. **Arrow functions**: Used in some test cases (e.g., `"list.forEach(item =>{\r\n    item.setAttribute('tabindex', '-1');\r\n});"`).

**Other Alternatives**

If none of these options were available, other alternatives could include:

1. **Using `while` loops with manual length checks**
2. **Using a library like Lodash's `forEach` function**

However, since the benchmark focuses on native JavaScript features and optimizations, these alternative approaches are not relevant to this specific benchmark.

In summary, the benchmark provides a clear comparison of three common ways to iterate over arrays in JavaScript, highlighting the benefits and drawbacks of each approach.

Related benchmarks:

NodeList For vs Foreach123 (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Default For

For with length caching

forEach

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