Benchmark: Long NodeList to array

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var fooSet = new Set();
var ul = document.querySelector('ul');
for(var i=0;i<10000;i++) {
  fooSet.add(i);
  ul.appendChild(document.createElement('li'));
}

var listItems = document.querySelectorAll('li');

Tests:

Array.from on NodeList
var other = Array.from(listItems);
Spread on NodeList
var other = [...listItems];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from on NodeList
Spread on NodeList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from on NodeList	4990.6 Ops/sec
Spread on NodeList	4683.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark that tests two different approaches for converting a NodeList (a collection of DOM elements) to an array: using `Array.from()` and using the spread operator (`...`).

**Options Compared**

Two options are being compared:

1. **Array.from()**: This method creates a new array from an iterable or an array-like object. In this case, it's used to convert a NodeList (a collection of DOM elements) to an array.
2. **Spread Operator (`...`)**: This operator allows you to expand an array-like expression into individual elements, which can then be processed individually.

**Pros and Cons of Each Approach**

1. **Array.from()**:
	* Pros:
		+ More explicit and readable way to convert a NodeList to an array.
		+ Provides better performance in some cases (depending on the browser).
	* Cons:
		+ May incur additional overhead due to the creation of a new array.
2. **Spread Operator (`...`)**:
	* Pros:
		+ More concise and expressive way to convert a NodeList to an array.
		+ Can be faster in some cases (depending on the browser).
	* Cons:
		+ May not be as explicit or readable, especially for developers who are not familiar with this syntax.

**Library and Purpose**

None of the test cases rely on any external libraries. However, it's worth noting that `Array.from()` was introduced in ECMAScript 2015 (ES6), which means that older browsers may not support it.

**Special JS Feature or Syntax**

Neither of the test cases uses any special JavaScript features or syntax beyond what's commonly used in modern web development.

**Other Considerations**

When working with NodeLists and arrays, it's essential to consider the following:

* **Performance**: When working with large datasets, performance can be a critical factor. In this benchmark, both approaches are being compared to determine which one is faster.
* **Readability and Maintainability**: Code readability and maintainability are crucial aspects of software development. The choice between `Array.from()` and the spread operator can impact the readability and maintainability of your code.

**Alternative Approaches**

If you need to convert a NodeList to an array, there are a few alternative approaches:

* **Using `slice()`**: This method returns a shallow copy of a portion of an array. You can use it like this: `Array.from(listItems).slice(0, 10)`.
* **Using a `for` loop**: You can use a traditional `for` loop to iterate over the NodeList and push elements into an array.

Here's some sample code that demonstrates these alternative approaches:
```javascript
// Using slice()
var other = Array.from(listItems).slice(0, 10);

// Using a for loop
var other = [];
for (var i = 0; i < listItems.length; i++) {
  other.push(listItems[i]);
}
```
Keep in mind that these alternative approaches may not be as efficient or readable as using `Array.from()` or the spread operator.

Related benchmarks:

Long NodeList to array (version: 0)

Comparing performance of: Array.from on NodeList vs Spread on NodeList

Created: one year ago by: Guest

Jump to the latest result

Array.from on NodeList

Spread on NodeList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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