Benchmark: NodeList for vs forEach vs length cached

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:

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, l=list.length; i < l; i++) { list[i].setAttribute('tabindex', '-1'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
forEach
for with length caching

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/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
for	673.6 Ops/sec
forEach	747.7 Ops/sec
for with length caching	892.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net provides a JavaScript microbenchmarking platform, allowing users to create and run tests for various scenarios. In this case, we're analyzing a specific benchmark that compares three approaches for iterating over an HTML NodeList: `for`, `forEach`, and `for` with length caching.

**Approach 1: Traditional `for` Loop**

The traditional `for` loop approach iterates over the NodeList using a manual index (`i`) and accesses each element's property directly. This method is straightforward but may have performance implications due to the need for explicit indexing.

```javascript
for (let i = 0; i < list.length; i++) {
    list[i].setAttribute('tabindex', '-1');
}
```

**Pros:**

* Easy to understand and implement.
* No additional libraries or dependencies required.

**Cons:**

* May have performance overhead due to explicit indexing.

**Approach 2: `forEach` Method**

The `forEach` method is a more modern and concise way to iterate over collections. It iterates over the NodeList using a callback function, which can be beneficial for readability and maintainability.

```javascript
list.forEach(item => {
    item.setAttribute('tabindex', '-1');
});
```

**Pros:**

* More readable and maintainable.
* No explicit indexing required.

**Cons:**

* May have performance overhead due to the callback function's execution.

**Approach 3: `for` with Length Caching**

This approach uses a technique called "length caching" to optimize performance. The loop iterates over the NodeList using a manual index (`i`) and accesses each element's property directly, but caches the length of the NodeList in a variable (`l`). This allows the loop to stop early when `i` reaches the end of the NodeList.

```javascript
for (let i = 0, l=list.length; i < l; i++) {
    list[i].setAttribute('tabindex', '-1');
}
```

**Pros:**

* Can provide better performance due to length caching.
* Still easy to understand and implement.

**Cons:**

* Requires manual indexing and caching.
* May not be as readable as other approaches.

**Library Usage:**

The benchmark uses the `querySelectorAll` method, which is part of the DOM API. This method returns a NodeList that represents all matching elements in the document.

**Special JS Features/Syntax:**

None mentioned in this specific benchmark. However, it's worth noting that some modern JavaScript features like `const`, `let`, and arrow functions are not used in this benchmark, which is generally considered good practice for readability and maintainability.

**Alternative Approaches:**

Other approaches to iterating over NodeLists might include:

* Using a library like Lodash or Ramda for more functional programming styles.
* Utilizing Web Workers or other parallel processing techniques to improve performance.
* Employing caching mechanisms or memoization to reduce the number of DOM queries.

Keep in mind that the choice of approach depends on specific requirements, such as readability, maintainability, and performance.

Related benchmarks:

NodeList for vs forEach vs length cached (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

for

forEach

for with length caching

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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