Benchmark: Array.from vs Spread with Node List DOM

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 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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Array.from on NodeList	27911.6 Ops/sec
Spread on NodeList	29874.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for converting a NodeList (a list of DOM elements) into an array: using `Array.from()` or the spread operator (`...`).

**Script Preparation Code**

The script preparation code creates a simple HTML page with a numbered list, appends 100 new list items to it, and then selects all the existing list items. This creates a NodeList that will be used for testing.

```javascript
var ul = document.querySelector('ul');
for (var i = 0; i < 100; i++) {
  ul.appendChild(document.createElement('li'));
}

var listItems = document.querySelectorAll('li');
```

**Html Preparation Code**

The HTML preparation code is a basic `<ul>` element with no contents.

```html
<ul>
</ul>
```

**Benchmark Definition and Individual Test Cases**

There are two test cases:

1. `Array.from on NodeList`: Creates an array from the NodeList using `Array.from(listItems)`.
2. `Spread on NodeList`: Creates an array from the NodeList using the spread operator (`[...listItems]`).

These test cases will measure the performance difference between these two approaches.

**Library Used**

In both test cases, a library is used: none (the standard JavaScript methods are being tested). However, it's worth noting that `Array.from()` was introduced in ECMAScript 2015 and became widely supported starting from modern browsers, so some older browsers might not support it.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what is commonly used in modern JavaScript development. However, it's worth noting that `Array.from()` uses a feature called "structured concurrency" which can provide better performance in certain scenarios.

**Pros and Cons of Each Approach**

1. **`Array.from(listItems)`**:
	* Pros: More concise and readable, widely supported, and provides additional methods like `forEach()`, `map()`, etc.
	* Cons: May have slightly worse performance due to the creation of a new array.
2. **`[...listItems]` (spread operator)**:
	* Pros: Also more concise and readable, and has better performance in some scenarios because it creates an array in-place.
	* Cons: Some older browsers might not support it, and its syntax can be less familiar to some developers.

**Other Alternatives**

1. **`Array.prototype.slice()`**: Creates a shallow copy of the NodeList by slicing it into an array. While it works, it's generally slower than `Array.from()` or the spread operator.
2. **`NodeList.prototype.items` property**: In modern browsers, you can use the `items` property to get an iterable sequence of the NodeList elements. However, this approach is less common and might not be supported in older browsers.

**Benchmark Results**

The latest benchmark results show that:

* The spread operator (`[...listItems]`) has a slightly better performance (higher executions per second) compared to `Array.from(listItems)` on the given hardware.

Keep in mind that these results may vary depending on your specific use case, browser version, and system configuration.

Related benchmarks:

Array.from vs Spread with Node List DOM (version: 0)

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

Created: 2 years 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):