Benchmark: node list conversion

Script Preparation code:

var a = document.querySelectorAll('*');
var ArrayProtoSlice = Array.prototype.slice;

Tests:

Array.from
var b = Array.from(a);
Spread
var b = [...a]
for-loop
var l = a.length; var b = Array(l); for (let i = 0; i < l; i += 1) { b[i] = a[i]; }
Array.prototype.slice
var b = ArrayProtoSlice.call(a, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
for-loop
Array.prototype.slice

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/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	290781.6 Ops/sec
Spread	309008.9 Ops/sec
for-loop	570324.4 Ops/sec
Array.prototype.slice	377123.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is defined by two scripts: `Script Preparation Code` and `Html Preparation Code`. The script preparation code is executed once to set up the environment, while the html preparation code is not needed in this case. The main goal of the benchmark is to measure how different methods convert a list of elements into an array.

**Options Compared**

There are four options compared:

1. **Array.from()**: This method creates a new array from an iterable or an array-like object.
2. **Spread Operator (...)**: This operator creates a new array by spreading the elements of an array-like object.
3. **For-loop**: This approach uses a traditional for loop to create a new array by iterating over the elements of the original array and assigning each element to a new array.
4. **Array.prototype.slice()**: This method returns a shallow copy of a portion of an array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Array.from()**:
	* Pros: Fast, concise, and modern.
	* Cons: May not be supported in older browsers or versions.
2. **Spread Operator (...)**:
	* Pros: Concise, easy to read, and supported by most modern browsers.
	* Cons: May not work as expected with large arrays or complex data structures.
3. **For-loop**:
	* Pros: Works well for large arrays, supports older browsers.
	* Cons: More verbose, slower than other methods.
4. **Array.prototype.slice()**:
	* Pros: Fast, widely supported, and reliable.
	* Cons: May not be as concise or modern-looking as other options.

**Other Considerations**

When choosing a method for array conversion, consider the following:

* Performance: If speed is critical, `Array.from()` or `Array.prototype.slice()` might be a better choice.
* Browser Support: If you need to support older browsers, `For-loop` or `Array.prototype.slice()` might be more reliable.
* Readability and Maintainability: If conciseness and readability are important, `Spread Operator (...)` or `Array.from()` might be a better option.

**Library Usage**

None of the benchmarked methods require any additional libraries beyond what's built into JavaScript. However, if you're using a polyfill for older browsers, you might need to add some library code.

**Special JS Feature/Syntax**

The benchmark uses modern JavaScript features such as:

* Arrow functions (`=>`)
* Template literals (`\r\n`)

These features are widely supported in modern browsers but may not work in older versions.

Related benchmarks:

node list conversion (version: 0)

Comparing performance of: Array.from vs Spread vs for-loop vs Array.prototype.slice

Created: one year ago by: Guest

Jump to the latest result

Array.from

Spread

for-loop

Array.prototype.slice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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