Benchmark: NodeList vs Array iterator 3

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var ul = document.querySelector('ul');
for(var i=0;i<100;i++) {
  ul.appendChild(document.createElement('li'));
}

var nodeList = document.querySelectorAll('li');
var array = Array.from(nodeList);

Tests:

nodeList
for (const i of nodeList) { i.classList.add("hi"); }
array
for (const i of array) { i.classList.add("hi"); }
created array
let a2 = Array.from(nodeList); for (const i of a2) { i.classList.add("hi"); }
spread array
let a3 = [...nodeList]; for (const i of a3) { i.classList.add("hi"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
nodeList
array
created array
spread array

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.

Measuring performance differences between various approaches is essential in understanding the efficiency of different methods, especially when working with JavaScript.

**Benchmark Context**

The provided benchmark compares the execution speed of three approaches for iterating over an HTML NodeList:

1. **Original NodeList**: Directly iterating over a NodeList using a traditional `for` loop.
2. **Created Array**: Converting the NodeList to an array using `Array.from()` and then iterating over it with another `for` loop.
3. **Spread Array**: Spreading the NodeList into an array using the spread operator (`[...]`) and then iterating over it with another `for` loop.

**Library Usage**

In this benchmark, the following libraries are used:

* None explicitly, but `Array.from()` is a built-in JavaScript method that leverages the V8 engine's array creation capabilities.
* No third-party libraries are mentioned in the provided benchmark definition or results.

**Special JS Features/Syntax**

This benchmark uses:

* **Template literals**: Used to concatenate strings with variables (e.g., `"var ul = document.querySelector('ul');\r\nfor(var i=0;i<100;i++) {\r\n  ul.appendChild(document.createElement('li'));\r\n}"`).
* **Spread operator (`[...]`)**: Used to spread the NodeList into an array.

**Benchmark Options and Their Pros/Cons**

1. **Original NodeList**:
	* Pros: Simple, straightforward approach.
	* Cons: May not be optimized for performance due to the V8 engine's limitations.
2. **Created Array**:
	* Pros: Leverages `Array.from()` which is likely optimized by the V8 engine.
	* Cons: Requires an additional step of converting the NodeList to an array, adding overhead.
3. **Spread Array**:
	* Pros: Uses a familiar pattern for working with arrays, potentially reducing cognitive load.
	* Cons: Still requires creating an intermediate array, which might incur some overhead.

**Other Considerations**

* The benchmark uses a relatively small number of elements (100 `li` elements) and a simple iteration pattern. In more complex scenarios, performance differences between these approaches may become less significant.
* The use of template literals for script preparation code is not particularly noteworthy in terms of performance, but it's an interesting aspect of modern JavaScript syntax.

**Alternative Approaches**

Other possible iterations over a NodeList could include:

1. **Using `forEach()`**: Which might be faster than traditional `for` loops due to the V8 engine's optimized `forEach()` implementation.
2. **Utilizing WebAssembly or native arrays**: If performance-critical applications require the absolute fastest execution times, using WebAssembly or native arrays might provide benefits.

However, these alternative approaches are likely overkill for this specific benchmark scenario and would only be relevant in highly optimized, performance-sensitive codebases.

For a wide range of software engineers, understanding the basic differences between these iteration approaches will help them make informed decisions about their own JavaScript coding choices.

Related benchmarks:

NodeList vs Array iterator 3 (version: 0)

Comparing performance of: nodeList vs array vs created array vs spread array

Created: 4 years ago by: Guest

Jump to the latest result

nodeList

array

created array

spread array

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