Benchmark: NodeList For vs Foreach fix

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'); }
forEach
list.forEach(item => { item.setAttribute('tabindex', '-1'); });
For with length caching
for(let i = 0, length = list.length ; i < length; i++) { list[i].setAttribute('tabindex', '-1'); }
toArray (Array.prototype.slice) and for with caching
const list2 = Array.prototype.slice.call(list); for(let i = 0, length = list2.length ; i < length; i++) { list2[i].setAttribute('tabindex', '-1'); }
toArray (Array.prototype.slice) and for-of
const list2 = Array.prototype.slice.call(list); for(const item of list2) { item.setAttribute('tabindex', '-1'); }
toArray (Array.from) and for
const list2 = Array.from(list); for(let i = 0, length = list2.length ; i < length; i++) { list2[i].setAttribute('tabindex', '-1'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Default For
forEach
For with length caching
toArray (Array.prototype.slice) and for with caching
toArray (Array.prototype.slice) and for-of
toArray (Array.from) and for

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is defined in JSON format, which represents a JavaScript microbenchmark. The benchmark creates an HTML page with 1000 `<span>` elements using `insertAdjacentHTML` and then selects all these elements as a NodeList using `querySelectorAll`. The goal is to set the `tabindex` attribute for each element.

**Options Compared**

The following options are compared:

1. **Default For Loop**: Uses a traditional `for` loop to iterate over the NodeList.
2. **ForEach Loop**: Uses the `forEach` method to iterate over the NodeList.
3. **For with Length Caching**: Uses a `for` loop and caches the length of the NodeList in a variable (`length`) to avoid recalculating it on each iteration.
4. **ToArray (Array.prototype.slice) and For**: Converts the NodeList to an array using `Array.prototype.slice`, then uses a `for` loop to iterate over the array.
5. **ToArray (Array.from) and For**: Converts the NodeList to an array using `Array.from`, then uses a `for` loop to iterate over the array.
6. **ToArray (Array.prototype.slice) and For-of**: Converts the NodeList to an array using `Array.prototype.slice`, then uses a `for...of` loop to iterate over the array.

**Pros and Cons of Each Approach**

1. **Default For Loop**: This is the most straightforward approach, but it may be slower due to the overhead of the `length` property being accessed on each iteration.
2. **ForEach Loop**: The `forEach` method is generally faster than a traditional `for` loop, as it avoids the need to access the `length` property and can use optimizations such as caching the result of `list.length`.
3. **For with Length Caching**: This approach caches the length of the NodeList in a variable, which can reduce the number of times `list.length` is accessed. However, this may require an extra variable to store the cached value.
4. **ToArray (Array.prototype.slice) and For**: Converting the NodeList to an array using `Array.prototype.slice` can be slower than other approaches, as it requires creating a new array object. However, this approach avoids accessing the `length` property of the NodeList.
5. **ToArray (Array.from) and For**: This approach is similar to the previous one but uses `Array.from` instead of `Array.prototype.slice`. The performance difference may be negligible.
6. **ToArray (Array.prototype.slice) and For-of**: This approach converts the NodeList to an array using `Array.prototype.slice`, then uses a `for...of` loop, which can be slower than other approaches due to the overhead of parsing the iterator.

**Other Considerations**

* The benchmark is running on Chrome 118 on a Windows Desktop, so results may not generalize to other browsers or platforms.
* The benchmark only measures performance for setting the `tabindex` attribute, so it may not represent the overall performance of each approach in more complex scenarios.
* The `RawUAString` field provides information about the browser and device platform used to run the benchmark.

**Alternatives**

Other alternatives that could be considered include:

* Using a library like Lodash or Ramda, which provide optimized iteration methods.
* Using a specialized iterator, such as an iterator factory function, to create iterators for the NodeList.
* Optimizing the `tabindex` attribute setter using WebAssembly or other low-level optimization techniques.

Keep in mind that these alternatives may introduce additional complexity and may not be applicable to all use cases. The current benchmark provides a simple and straightforward way to compare the performance of different iteration methods.

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/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Default For	1440.4 Ops/sec
forEach	1531.5 Ops/sec
For with length caching	1782.1 Ops/sec
toArray (Array.prototype.slice) and for with caching	1710.1 Ops/sec
toArray (Array.prototype.slice) and for-of	1717.4 Ops/sec
toArray (Array.from) and for	1507.5 Ops/sec

Related benchmarks:

NodeList For vs Foreach fix (version: 0)

Comparing performance of: Default For vs forEach vs For with length caching vs toArray (Array.prototype.slice) and for with caching vs toArray (Array.prototype.slice) and for-of vs toArray (Array.from) and for

Created: one year ago by: Guest

Jump to the latest result

Default For

forEach

For with length caching

toArray (Array.prototype.slice) and for with caching

toArray (Array.prototype.slice) and for-of

toArray (Array.from) and for

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