Benchmark: NodeList vs Array iterator 4

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"); } for (const i of nodeList) { i.classList.add("hi"); }
array
for (const i of array) { i.classList.add("hi"); } 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"); } for (const i of a2) { i.classList.add("hi"); }
spread array
let a3 = [...nodeList]; for (const i of a3) { i.classList.add("hi"); } 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.

I'll dive into explaining the benchmark.

**Benchmark Overview**

The provided JSON represents a microbenchmark test on MeasureThat.net, which compares the performance of three different approaches: using an Array iterator with `Array.from(nodeList)`, creating an array from the NodeList using `Array.from()`, and spreading the NodeList elements using spread syntax (`[...nodeList]`). Each approach is used to add a class "hi" to each element in a NodeList containing 100 list items.

**Options Compared**

The benchmark compares four options:

1. **NodeList**: The original NodeList of list items.
2. **Array iterator with Array.from(nodeList)**: Using `Array.from()` to convert the NodeList into an array and then iterating over it using an array iterator.
3. **Created array**: Creating a new array from the NodeList using `Array.from()`.
4. **Spread array**: Spreading the NodeList elements using spread syntax (`[...nodeList]`) and then iterating over the resulting array.

**Pros and Cons of Each Approach**

1. **NodeList**: This is the original approach, which uses the built-in `forEach()` method to iterate over the list items.
	* Pros: Simple and efficient, as it leverages the optimized `forEach()` implementation in JavaScript engines.
	* Cons: May not be the fastest due to its simplicity and lack of iteration overhead.
2. **Array iterator with Array.from(nodeList)**: This approach creates an array from the NodeList using `Array.from()` and then iterates over it using an array iterator.
	* Pros: Allows for more explicit control over iteration, which can lead to better performance in some cases.
	* Cons: Introduces extra overhead due to the creation of an intermediate array.
3. **Created array**: This approach creates a new array from the NodeList using `Array.from()` and then iterates over it using an array iterator.
	* Pros: Similar to the previous approach, but with a more concise syntax.
	* Cons: Still introduces extra overhead due to the creation of an intermediate array.
4. **Spread array**: This approach spreads the NodeList elements using spread syntax (`[...nodeList]`) and then iterates over the resulting array.
	* Pros: Can lead to better performance due to the optimized spread syntax implementation in modern JavaScript engines.
	* Cons: May not work as expected in older browsers or environments that don't support spread syntax.

**Library Usage**

The benchmark uses the `Array.from()` function, which is a part of the ECMAScript 2015 standard (ES6) and has been implemented in most modern JavaScript engines. It's used to convert the NodeList into an array.

**Special JS Features/Syntax**

None mentioned in this specific benchmark.

**Benchmark Results**

The latest benchmark results show that:

* The `array` approach is the fastest, with an average of 15460 executions per second.
* The `spread array` approach is the second-fastest, with an average of 9445 executions per second.
* The `created array` and `Array iterator with Array.from(nodeList)` approaches are slower, with averages of 11840 and 11909 executions per second, respectively.

**Other Alternatives**

If you need to compare performance in a similar scenario, you can use other alternatives, such as:

* Using a custom loop instead of `forEach()` or array iterators.
* Using a library like Lodash or Underscore.js for iteration utilities.
* Implementing your own custom iterator using a closure or recursive functions.

Keep in mind that the best approach depends on the specific requirements and constraints of your project.

Related benchmarks:

NodeList vs Array iterator 4 (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):