Benchmark: Array.from vs Spread with Node List DOM More

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var ul = document.querySelector('ul');
for(var i=0;i<1000;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:

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 break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is comparing two approaches to iterate over a NodeList in JavaScript:

1. `Array.from(listItems)`
2. `[...listItems]` (Spread operator)

**What's Being Tested**

The benchmark measures the execution speed of these two approaches on a NodeList. The test case appends 1000 list items to an unordered list (`ul`) and then iterates over the list using each approach.

**Options Compared**

Two options are being compared:

1. `Array.from(listItems)`
	* Creates a new Array from the NodeList, iterating over it.
	* Pros: More explicit, can be used with other Array methods like `map()`, `filter()`.
	* Cons: May incur additional overhead due to array creation.
2. `[...listItems]` (Spread operator)
	* Creates an array copy of the NodeList, iterating over it using the spread operator.
	* Pros: Less verbose, can be used with other array methods like `map()` and `filter()`.
	* Cons: May incur additional overhead due to array creation.

**Library and Purpose**

The library used is `Array.prototype.from()` (for the first option) and Spread operator (`...` syntax) (for the second option). Both are part of the ECMAScript 2015 standard.

**Special JS Feature or Syntax**

There's no special feature or syntax being tested in this benchmark. It's a straightforward comparison of two approaches to iterate over a NodeList.

**Other Alternatives**

If you're looking for alternative ways to iterate over a NodeList, here are some other options:

1. `for...of` loop: Similar to the spread operator approach, but more concise.
2. `forEach()` method: A synchronous method that can be used with NodeLists.

Here's an example of how you could rewrite the benchmark using a `for...of` loop:
```javascript
var listItems = document.querySelectorAll('li');
for (const item of listItems) {
  // ...
}
```

And here's an example of how you could use the `forEach()` method:
```javascript
listItems.forEach((item) => {
  // ...
});
```
Keep in mind that these alternatives may not be as efficient as the original two options being compared.

Related benchmarks:

Array.from vs Spread with Node List DOM More (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

No previous run results

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