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:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
Default For	907.8 Ops/sec
For with length caching	948.6 Ops/sec
forEach	910.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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: one year ago by: Guest

Jump to the latest result

Default For

For with length caching

forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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