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'); }

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

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 explanation of the provided JavaScript benchmark.

**Benchmark Overview**

The benchmark compares four different approaches to iterate over a NodeList:

1. `for` loop without caching the length
2. `for` loop with caching the length
3. `forEach`
4. `for...of` loop

**Options Compared**

The four options are compared in terms of their execution time, measured by the number of executions per second.

**Pros and Cons of Each Approach**

1. **`for` loop without caching the length**: This approach has to look up the length of the NodeList on every iteration, which can be slow.
	* Pros: Simple to implement
	* Cons: Slow due to frequent length lookups
2. **`for` loop with caching the length**: This approach caches the length of the NodeList once and uses it for the duration of the loop.
	* Pros: Faster than the first approach, as it avoids frequent length lookups
	* Cons: Requires an extra step to cache the length, which can be overhead
3. **`forEach`**: This approach iterates over the NodeList using a specialized method that handles iteration and caching internally.
	* Pros: Fastest of all four options, as it leverages browser optimizations
	* Cons: May not work in older browsers or environments without `forEach`
4. **`for...of` loop**: This approach uses a newer feature to iterate over iterables, including NodeList.
	* Pros: Fast and modern, as it's supported by most recent browsers
	* Cons: Requires support for the `for...of` syntax, which may not be available in older browsers

**Library Used**

None explicitly mentioned. However, the `forEach` method is a built-in method of NodeLists and arrays.

**Special JS Feature or Syntax**

The `for...of` loop uses a new syntax introduced in ECMAScript 2015 (ES6). It's not commonly used yet but gaining popularity.

**Other Alternatives**

If you don't want to use `forEach`, you can also consider using other methods like `Array.prototype.forEach()` or even iterating over the NodeList manually with an index variable. However, these approaches may be slower than the compared options.

Keep in mind that browser optimizations and caching can significantly affect performance. The benchmark results should give you a general idea of which approach is fastest for your use case.

Related benchmarks:

NodeList For vs Foreach- (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Default For

For with length caching

forEach

for of

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