Benchmark: Array.from vs spread for DOM

HTML Preparation code:


<div id='test-list'>
  <ul>
    <li class="item">Item 01</li>
    <li class="item">Item 02</li>
    <li class="item">Item 03</li>
    <li class="item">Item 04</li>
    <li class="item">Item 05</li>
    <li class="item">Item 06</li>
    <li class="item">Item 07</li>
    <li class="item">Item 08</li>
    <li class="item">Item 09</li>
    <li class="item">Item 10</li>
    <li class="item">Item 11</li>
    <li class="item">Item 12</li>
    <li class="item">Item 13</li>
    <li class="item">Item 14</li>
    <li class="item">Item 15</li>
    <li class="item">Item 16</li>
    <li class="item">Item 17</li>
    <li class="item">Item 18</li>
    <li class="item">Item 19</li>
    <li class="item">Item 20</li>
  </ul>
</div>

Script Preparation code:

const items = document.querySelectorAll('.item');

Tests:

Array.from()
const items = document.querySelectorAll('.item'); Array.from(items);
Spread
const items = document.querySelectorAll('.item'); [...items]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from()
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Array.from()	173524.9 Ops/sec
Spread	184150.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript benchmarking test case that compares the performance of two approaches: `Array.from()` and the spread operator (`[...items]`) when working with DOM elements.

**Script Preparation Code**
```javascript
const items = document.querySelectorAll('.item');
```
This code selects all HTML elements with the class `item` from the document and assigns them to an array called `items`.

**Html Preparation Code**
```html
<div id='test-list'>
  <ul>
    
    <li class="item">Item 01</li>
    ...
  </ul>
</div>
```
This HTML code creates a list of 20 DOM elements with the class `item`.

**Benchmark Definition**

The benchmark consists of two individual test cases:

1. **Array.from()**: This test case iterates over the `items` array using `Array.from()` and performs no operation.
2. **Spread**: This test case iterates over the `items` array using the spread operator (`[...items]`) and also performs no operation.

The benchmark aims to measure the performance difference between these two approaches when working with large DOM datasets.

**Library:**

None (no external libraries are used in this benchmark)

**Special JS Feature/Syntax:**

* None

**Pros and Cons of Each Approach:**

1. **Array.from()**
	* Pros:
		+ More explicit and readable way to create an array from a given iterable.
		+ Can be more performant for large datasets, as it avoids the overhead of the spread operator.
	* Cons:
		+ May have a higher memory footprint due to the creation of a new array object.
2. **Spread**
	* Pros:
		+ More concise and readable way to iterate over an iterable.
		+ Can be more efficient in terms of memory usage, as it avoids creating a new array object.
	* Cons:
		+ May have performance issues for very large datasets due to the overhead of the spread operator.

**Other Alternatives:**

1. **Using `for...of` loop**: Instead of using `Array.from()` or the spread operator, you can use a traditional `for...of` loop to iterate over the elements in the array.
```javascript
for (const item of items) {
  // do something with each item
}
```
This approach avoids creating an array object and is often more efficient for large datasets.

2. **Using `slice()` or `filter()`**: Depending on your specific use case, you can use methods like `slice()` or `filter()` to create a new array from the original one.
```javascript
const newItems = items.slice(0, 10); // take the first 10 elements
```
This approach provides more control over the iteration process and can be more efficient than using `Array.from()` or the spread operator.

Related benchmarks:

Array.from vs spread for DOM (version: 0)

Comparing performance of: Array.from() vs Spread

Created: one year ago by: Guest

Jump to the latest result

Array.from()

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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