Benchmark: Convert querySelectorAll to array + push

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')]
push
a=[]; for(let i=0; i<10000; i++) { a.push(maind[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice.call	236.3 Ops/sec
[].slice.call	240.2 Ops/sec
...	169.5 Ops/sec
push	138.3 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 its various aspects.

**Benchmark Definition**
The provided JSON represents a JavaScript microbenchmarking framework, MeasureThat.net. It includes:

*   **Script Preparation Code**: This section is executed before running each test case. The script creates an element `maind` with 10,000 child elements (`div`), which serves as the source of data for the benchmark. This setup ensures that the test cases measure performance based on manipulating a large dataset.

**Individual Test Cases**
Each test case compares different ways to convert the result of `querySelectorAll('div')` from a NodeList (a collection of DOM nodes) into an array. The test cases are:

*   **Array.prototype.slice.call(maind.querySelectorAll('div'));**: This method call converts the NodeList to an array using the `slice()` function, followed by calling `call()` on the resulting array prototype.
*   **[].slice.call(maind.querySelectorAll('div'));**: Similar to the previous option but uses a literal array instead of `Array.prototype`.
*   **[...maind.querySelectorAll('div')];**: This method call uses the spread operator (`...`) to convert the NodeList into an array. The spread operator is supported in modern JavaScript and was introduced in ES6.
*   **`a=[]; for (let i = 0; i < 10000; i++) { a.push(maind[i]); };`: This test case uses a variable `a` initialized as an empty array, and then pushes each element from the NodeList onto it. The resulting array is not explicitly created or converted.

**Library Usage**
In this benchmark, none of the libraries are explicitly used beyond what's built into modern JavaScript (e.g., ES6 features like spread operator (`...`) or `Array.prototype.slice()`).

**Special JS Feature/Syntax**
The benchmark makes use of several modern JavaScript features:

*   **Spread Operator (`...`)**: This feature was introduced in ES6 and allows for converting a NodeList to an array by simply listing its elements after the expression.
*   **Template Literals**: The `maind.querySelectorAll('div')` is used without quotes, which might be considered shorthand or syntax highlighting in some IDEs but isn't technically "template literals" in this context.

**Pros and Cons of Different Approaches**

*   **Array.prototype.slice.call(maind.querySelectorAll('div'));**:
    *   Pros: Widely supported across older browsers.
    *   Cons: Less efficient than spread operator or literal array conversion due to additional function call overhead.
*   **[].slice.call(maind.querySelectorAll('div'));**:
    *   Pros: More concise, potentially faster than `Array.prototype.slice()` due to reduced overhead.
    *   Cons: Requires a JavaScript context (e.g., a variable) which might not be readily available or preferred by some users.
*   **[...maind.querySelectorAll('div')];**:
    *   Pros: Most efficient in terms of overhead and modern browser support.
    *   Cons: Less widely supported across older browsers due to the introduction of spread operators.

**Alternatives**
There are alternative ways to convert a NodeList into an array:

*   Using `Array.from()` method (introduced in ES6) which provides more control over the resulting array than spread operator or `slice()`.
*   Converting the NodeList to an HTMLCollection, then using `Array.prototype.slice()`, though this is less efficient due to the overhead of converting back and forth.

Overall, MeasureThat.net's benchmark highlights performance differences between various methods for converting a NodeList into an array. The results can be useful in understanding the trade-offs involved when choosing between different approaches in JavaScript development.

Related benchmarks:

Convert querySelectorAll to array + push (version: 0)

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

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.slice.call

[].slice.call

...

push

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