Benchmark: Spread vs Array.from on querySelectorAll

HTML Preparation code:

<div id="my-div"></div>

Script Preparation code:

const div = document.getElementById("my-div");
for (let i = 0; i < 10000; i++) {
    const child = document.createElement("div");
    child.append(`I'm div-${i}`);
    div.append(child);
}

Tests:

Spread
const childNodes = [...document.querySelectorAll("#my-div div")];
Array.from
const childNodes = Array.from(document.querySelectorAll("#my-div div"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Array.from

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/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread	800.5 Ops/sec
Array.from	842.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

**Benchmark Overview**

The benchmark tests two approaches for creating an array from `querySelectorAll` method results:

1. Using the spread operator (`...`)
2. Using the `Array.from()` method

The test case creates a DOM element with 10,000 child elements and then uses `querySelectorAll` to select all the child elements. The resulting array is created using either the spread operator or the `Array.from()` method.

**Options Compared**

Two options are compared:

1. **Spread Operator (`...`)**: This approach uses the syntax `[...array]` to create a new array from an existing array.
2. **Array.from() Method**: This approach uses the `Array.from()` method to create a new array from an existing iterable.

**Pros and Cons**

Here are some pros and cons of each approach:

**Spread Operator (`...`)**
Pros:

* Lightweight: Creating an array using the spread operator is generally faster than using `Array.from()`.
* Simple syntax: The syntax is easy to read and write.
Cons:

* Not as efficient for large arrays: The spread operator creates a new array by iterating over the elements, which can be slower for large arrays.

**Array.from() Method**
Pros:

* More flexible: `Array.from()` allows you to pass any iterable (e.g., an array, string, or DOMNodeList) as an argument.
Cons:

* Slightly heavier: Creating an array using `Array.from()` may be slightly slower than using the spread operator.

**Other Considerations**

Both approaches have their own set of caveats:

* The spread operator is only available in ECMAScript 2015 and later versions. If you need to support older browsers, you may need to use a polyfill or an alternative approach.
* `Array.from()` is supported by most modern browsers, but some older browsers may not have it.

**Library and Syntax**

In this benchmark, there are no external libraries used besides the JavaScript core features mentioned above. However, if you're interested in exploring other approaches, you might consider using a library like Lodash or Underscore.js, which provide various utility functions for working with arrays.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark.

Now that we've explored the benchmark, let's take a look at some alternative approaches:

* **for...of Loop**: Instead of using `Array.from()` or the spread operator, you could use a for...of loop to create an array.
```javascript
const childNodes = [];
for (const child of document.querySelectorAll('#my-div div')) {
  childNodes.push(child);
}
```
This approach is generally slower than using `Array.from()` or the spread operator.

* **Array.prototype.map()**: Another alternative approach could be using `map()` to create a new array from an existing iterable.
```javascript
const childNodes = document.querySelectorAll('#my-div div').map((child) => child);
```
This approach is similar to using `Array.from()`, but it uses the `map()` method instead.

These alternatives are not typically faster or slower than the original approaches, but they can provide interesting variations on how to create an array from an existing iterable.

Related benchmarks:

Spread vs Array.from on querySelectorAll (version: 0)

Create array from Node.childNodes

Comparing performance of: Spread vs Array.from

Created: 2 years ago by: Guest

Jump to the latest result

Spread

Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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