Benchmark: Array.from vs Spread on querySelectorAll

HTML Preparation code:

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Script Preparation code:

window.divs = document.querySelectorAll('div')

Tests:

Array.from
var result = Array.from(divs)
Spread
var result = [...divs]

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:

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.

**What is being tested?**

On MeasureThat.net, users can create and run JavaScript microbenchmarks to compare the performance of different approaches. In this case, we have two individual test cases: `Array.from` and `Spread`.

The benchmark measures how quickly these two methods can iterate over an array (`divs`) in a web page.

**What are the options being compared?**

We have two main options:

1. **Array.from**: This method creates a new Array instance from an iterable or an array-like object.
2. **Spread (ES6)**: This is the spread operator (`...`) which can be used to convert an array-like object into an array.

**Pros and Cons of each approach:**

**Array.from:**

Pros:

* Creates a new, independent array that can be modified without affecting the original `divs` array.
* Can handle large arrays efficiently by creating a contiguous block of memory.

Cons:

* Requires additional memory allocation for the new array.
* May have overhead due to function call and object creation.

**Spread:**

Pros:

* Does not create an intermediate array, reducing memory allocation and copying.
* Can be more efficient for small to medium-sized arrays.

Cons:

* Modifies the original `divs` array (if used as a collection), which might affect other parts of the code.
* May have higher overhead due to the spread operator's syntax and compiler optimizations.

**Other considerations:**

When using `Spread`, it's essential to ensure that the underlying data structure is suitable for spreading, such as an array-like object with length properties. If not, it may lead to unexpected behavior or errors.

In this benchmark, we are testing both approaches on a large array of elements (`divs`), which should help determine which method performs better in terms of execution speed and memory usage.

**Library used:**

There is no explicit library mentioned in the provided code. However, `querySelectorAll` suggests that we're using a web development framework like jQuery or vanilla JavaScript. In this case, it's likely a standard HTML manipulation API.

**Special JS feature or syntax:**

Neither of the test cases uses any special JavaScript features or syntax beyond what is commonly used.

Related benchmarks:

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

Comparing performance of: Array.from vs Spread

Created: 4 years ago by: Guest

Jump to the latest result

Array.from

Spread

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):