Benchmark: Arrays Destructuring

HTML Preparation code:

<!DOCTYPE html>
<html>
<head>
    <title>Array.from vs Spread Operator Benchmark</title>
</head>
<body>
</body>
</html>

Script Preparation code:

        for (let i = 0; i < 10000; i++) {
            const elem = document.createElement('div');
            elem.className = 'someClassedElements';
            document.body.appendChild(elem);
        }

Tests:

Spread
function benchmarkSpreadOperator() { const start = performance.now(); for (let i = 0; i < 1000; i++) { const elements = [...document.querySelectorAll('.someClassedElements')]; } const end = performance.now(); return end - start; } const spreadOperatorTime = benchmarkSpreadOperator(); console.log(`Spread Operator: ${spreadOperatorTime}ms`);
Array.from
function benchmarkArrayFrom() { const start = performance.now(); for (let i = 0; i < 1000; i++) { const elements = Array.from(document.querySelectorAll('.someClassedElements')); } const end = performance.now(); return end - start; } const arrayFromTime = benchmarkArrayFrom(); console.log(`Array.from: ${arrayFromTime}ms`);

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

User agent: Mozilla/5.0 (Android 13; Mobile; rv:122.0) Gecko/122.0 Firefox/122.0

Browser/OS: Firefox Mobile 122 on Android

View result in a separate tab

Test name	Executions per second
Spread	0.7 Ops/sec
Array.from	0.7 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 benchmark and its options.

**Benchmark Definition**

The benchmark is designed to measure the performance of two approaches:

1. **Spread Operator**: This approach uses the spread operator (`...`) to create an array from an HTML collection (in this case, elements with the class `someClassedElements`).
2. **Array.from()**: This approach uses the built-in `Array.from()` method to create an array from an HTML collection.

**Options Comparison**

Both approaches use an HTML collection as input and return an array. However, they differ in how they handle this input:

* The spread operator (`...`) creates a new array by iterating over the elements in the collection and adding them one by one to the resulting array.
* `Array.from()` creates an array by copying all the elements from the original collection into a new array.

**Pros and Cons**

**Spread Operator:**

Pros:

* More concise and readable code
* Can be more efficient for smaller arrays

Cons:

* May incur additional overhead due to the iteration over the elements in the collection
* May not be as fast as `Array.from()` for very large collections

**Array.from():**

Pros:

* More efficient for large collections, as it uses a optimized algorithm to copy the elements from the original collection
* More predictable performance, as it's based on the built-in method's implementation

Cons:

* Less concise and readable code compared to the spread operator
* May incur additional overhead due to the creation of a new array object

**Library/Library Purpose**

None in this benchmark.

**Special JS Feature/Syntax**

The benchmark uses `performance.now()` to measure time, which is a built-in JavaScript function that returns the current timestamp. This allows for accurate timing measurements.

**Benchmark Preparation Code**

The preparation code creates 10,000 elements with class `someClassedElements` and appends them to the HTML body. This ensures that the benchmark is run on a consistent setup with enough data points.

**Other Alternatives**

Alternative approaches could be:

* Using other array creation methods, such as `Array.isArray()` or `slice()`
* Using different libraries or frameworks for creating arrays (e.g., Lodash)
* Measuring performance using other timing functions (e.g., `Date.now()`)
* Comparing performance with other browsers or devices

Note that the choice of approach and alternative methods may affect the outcome of the benchmark, so it's essential to carefully consider these factors when conducting a performance comparison.

Related benchmarks:

Arrays Destructuring (version: 0)

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