Benchmark: slice, spread, pushapply, from, values, concat 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)
Array.concat
var other = [].concat.apply([], 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
Array.concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.53

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
slice	994166.6 Ops/sec
spread operator	917084.3 Ops/sec
push apply into empty array	2737675.2 Ops/sec
Array.from	771951.9 Ops/sec
Object.values	183870.6 Ops/sec
Array.concat	1555811.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is tested?**

The provided JSON represents a benchmark that compares six different approaches to convert an HTML NodeList to an array:

1. `Array.prototype.slice.call(dom)`
2. Spread operator (`var other = [ ...dom ]`)
3. `Array.push.apply(other, dom)`
4. `Array.from(dom)`
5. `Object.values(dom)`
6. `Array.concat.apply([], dom)`

**Options compared**

The benchmark is designed to compare the performance of these six approaches on a NodeList containing all elements from an HTML document (`document.body.querySelectorAll('*')`).

**Pros and Cons of each approach:**

1. **`Array.prototype.slice.call(dom)`**: This approach uses the `slice()` method to extract a portion of the array-like object (NodeList) and then calls the `call()` method to convert it into an actual array. It's a common pattern, but can be slow due to the overhead of calling `call()`.
	* Pros: widely supported, easy to understand.
	* Cons: slow, may not be efficient for large datasets.
2. **Spread operator (`var other = [ ...dom ]`)**: This approach uses the spread operator (`...`) to create a new array from the NodeList. It's a modern and concise way to convert an array-like object to an actual array.
	* Pros: fast, modern syntax, easy to understand.
	* Cons: may not be supported in older browsers or environments.
3. **`Array.push.apply(other, dom)`**: This approach uses the `push()` method to add elements to an empty array and then applies the NodeList using `apply()`. It's a common pattern, but can be slow due to the overhead of creating a new array and applying the NodeList.
	* Pros: widely supported, easy to understand.
	* Cons: slow, may not be efficient for large datasets.
4. **`Array.from(dom)`**: This approach uses the `from()` method to create an array from an iterable (NodeList). It's a modern and concise way to convert an array-like object to an actual array.
	* Pros: fast, modern syntax, easy to understand.
	* Cons: may not be supported in older browsers or environments.
5. **`Object.values(dom)`**: This approach uses the `values()` method to get an iterator from the NodeList and then uses `Object.values()` to create an array from the iterator. It's a concise way to convert an array-like object to an actual array, but may not be as efficient as other approaches.
	* Pros: fast, modern syntax, easy to understand.
	* Cons: may not be supported in older browsers or environments.
6. **`Array.concat.apply([], dom)`**: This approach uses the `concat()` method to concatenate arrays and then applies the NodeList using `apply()`. It's a common pattern, but can be slow due to the overhead of creating new arrays and applying the NodeList.
	* Pros: widely supported, easy to understand.
	* Cons: slow, may not be efficient for large datasets.

**Other considerations**

* The benchmark is designed to compare performance on a Desktop platform with Chrome 101 browser. Results may vary on other platforms or browsers.
* The `dom` variable represents the HTML document body, which contains all elements from the webpage.

**Alternative approaches**

If you need to convert an array-like object to an actual array in JavaScript, here are some alternative approaches:

1. Using `Array.from()`: This approach is modern and concise, but may not be supported in older browsers or environments.
2. Using `map()`: This approach can be used to create a new array from the NodeList by applying a transformation function using `map()`. However, it may not be as efficient as other approaches for large datasets.
3. Using `reduce()`: This approach can be used to create a new array from the NodeList by reducing it into an array using `reduce()`. However, it may not be as efficient as other approaches for large datasets.

Keep in mind that the best approach depends on your specific use case and performance requirements.

Related benchmarks:

slice, spread, pushapply, from, values, concat on NodeList (version: 1)

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 vs Array.concat

Created: 3 years ago by: Registered User

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

Array.concat

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