Benchmark: Convert querySelectorAll to array -

Script Preparation code:

maind = document.createElement('div');
for (let i = 0; i < 10000; i++) {
    let d = document.createElement('div');
    maind.appendChild(d);
}
document.body.appendChild(maind);

Tests:

Array.prototype.slice.call
Array.prototype.slice.call( maind.querySelectorAll('div') );
[].slice.call
[].slice.call( maind.querySelectorAll('div') );
...
[...maind.querySelectorAll('div')]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice.call
[].slice.call
...

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Mac OS X 11.2.1

View result in a separate tab

Test name	Executions per second
Array.prototype.slice.call	776.9 Ops/sec
[].slice.call	789.2 Ops/sec
...	485.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is testing three different ways to convert the result of `querySelectorAll` method on an HTML element (`maind`) into an array.

**Options Being Compared**

1. **Array.prototype.slice.call()**: This method creates a new array from an existing iterable (in this case, the result of `querySelectorAll`). The `call()` part is used to call the `slice()` function as a method on the Array prototype.
2. **[].slice.call()**: Similar to the previous option, but uses an arrow function (`[]`) instead of the `Array.prototype`.
3. **Spread operator (...)**: This method uses the spread operator to convert the result of `querySelectorAll` into an array.

**Pros and Cons**

* **Array.prototype.slice.call()**:
	+ Pros: Widely supported, easy to understand.
	+ Cons: May be slower due to the overhead of calling a function on the Array prototype.
* **[].slice.call()**:
	+ Pros: Can be faster than `Array.prototype.slice.call()` since it avoids the extra method call.
	+ Cons: Requires arrow functions (introduced in ECMAScript 2015), which may not be supported by older browsers or environments.
* **Spread operator (...)**:
	+ Pros: Simple, modern syntax. Fast and efficient.
	+ Cons: May not work in older browsers or environments that don't support the spread operator.

**Library/Utility Used**

None of these options rely on a specific library or utility beyond standard JavaScript features.

**Special JS Feature/Syntax**

The use of arrow functions (`[]`) in option 2 is an example of a modern JavaScript feature. Arrow functions were introduced in ECMAScript 2015 and provide a concise way to define small, single-expression functions.

**Other Considerations**

When testing performance-critical code like this benchmark, it's essential to consider factors such as:

* Browser support: Ensure the test works across different browsers and versions.
* Environment: Test on various environments (e.g., desktop, mobile) with different operating systems and hardware configurations.
* Platform: Test on multiple platforms to ensure consistency.

**Alternatives**

Other alternatives for converting an iterable into an array include:

* `Array.from()`: Introduced in ECMAScript 2015, this method creates a new array from an iterable.
* `iterableToArray()` functions: Some libraries and frameworks provide custom `iterableToArray()` functions that can convert iterables to arrays.

Keep in mind that the choice of alternative depends on the specific requirements and constraints of your project.

Related benchmarks:

Convert querySelectorAll to array - (version: 0)

Comparing performance of: Array.prototype.slice.call vs [].slice.call vs ...

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.slice.call

[].slice.call

...

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