Benchmark: Array.prototype.concat vs spread operator on NodeList

Script Preparation code:

var dom = document.body.querySelectorAll('*')

Tests:

slice
var other = Array.prototype.slice.call(dom);
spread operator
var other = [ ...dom ]
push apply into empty array
var other = []; [].push.apply(other, dom)
Array.from
var other = Array.from(dom);
Object.values
var other = Object.values(dom)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
spread operator
push apply into empty array
Array.from
Object.values

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 29 days ago):

LLMs can make mistakes. Check important info.

This benchmark compares different methods for creating an array from all the elements found in a webpage's `body` using HTML DOM APIs.

**Options Compared:**

* **slice:**  Uses `Array.prototype.slice.call(dom)` to create a new array by "copying" the elements of the `NodeList`.
* **Spread Operator:** Utilizes `[...dom]` to expand the elements of the `NodeList` directly into a new array. This is an ES6 feature introduced for concise array manipulation.
* **push.apply():** Creates an empty array (`other = [];`) and then uses `[].push.apply(other, dom)` to add all elements from the `NodeList` into the new array one by one.

* **Array.from():**  Leverages the `Array.from(dom)` method, which is designed specifically for converting iterable objects (like `NodeList`) into arrays. 
* **Object.values():** This approach uses `Object.values(dom)`, which returns an array of the *values* present in the DOM node object representing the body.

**Pros and Cons:**

* **slice:** Widely understood, generally performant but might have a slight overhead compared to newer methods.
* **Spread Operator:**  Concise, modern syntax, often considered performant.
* **push.apply():** Less efficient than other options due to its iterative nature of adding elements one by one.
* **Array.from():** Designed for conversion, generally performant and readable.

* **Object.values():** Only returns values, not the actual DOM nodes themselves, so it might not be suitable if you need to work with the nodes directly.

**Alternatives:**

* Direct query selection using methods like `document.body.querySelectorAll('*')` which are efficient and often preferred over iterating through a `NodeList`.

Let me know if you'd like more details on any specific aspect!

Latest run results:

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

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

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
slice	642534.8 Ops/sec
spread operator	675570.8 Ops/sec
push apply into empty array	1877254.4 Ops/sec
Array.from	545401.3 Ops/sec
Object.values	163514.5 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator on NodeList (version: 3)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: slice vs spread operator vs push apply into empty array vs Array.from vs Object.values

Created: 6 years ago by: Registered User

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 29 days ago):