Benchmark: Covert Node List to array

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var fooSet = new Set();
var ul = document.querySelector('ul');
for(var i=0;i<1000;i++) {
  fooSet.add(i);
  ul.appendChild(document.createElement('li'));
}

var listItems = document.querySelectorAll('li');

Tests:

Array.from on NodeList
var other = Array.from(listItems);
Spread on NodeList
var other = [...listItems];
[].slice.call
var other = [].slice.call(listItems);
for each push
var other = [] listItems.forEach(item => other.push(item))
for each cached new Array with know listItems length
var other = new Array(listItems.length) listItems.forEach((item,i) => other[i] = item)
for loop cached length
var other = new Array(listItems.length) for (let i = 0; i < listItems.length; i++) { other[i] = listItems[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from on NodeList
Spread on NodeList
[].slice.call
for each push
for each cached new Array with know listItems length
for loop cached length

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to convert a NodeList to an array is a common use case in JavaScript development.

**Benchmark Definition**

The provided benchmark definition represents a scenario where a NodeList of 1000 elements is created, and then various methods are used to convert it to an array. The conversion involves iterating over the NodeList and adding/pushing elements into a new array.

**Options Compared**

The six options compared in this benchmark are:

1. `Array.from(listItems)`: Uses the `from()` method to create a new array from the NodeList.
2. `[...listItems]`: Uses the spread operator (`...`) to convert the NodeList to an array.
3. `[]\slice.call(listItems)`: Uses the `slice()` method to create a shallow copy of the NodeList, which can be used to create a new array.
4. `for each push`: Iterates over the NodeList and pushes elements into a new array using the `push()` method.
5. `for each cached new Array with known listItems length`: Creates a new array with a known length (1000) and then iterates over the NodeList, assigning each element to the corresponding index in the array.
6. `for loop cached length`: Similar to option 5, but uses a traditional for loop instead of an arrow function.

**Pros and Cons**

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

1. **Array.from(listItems)**:
	* Pros: Efficient, readable, and concise.
	* Cons: May not work as expected in older browsers or versions of JavaScript.
2. **[...listItems]**:
	* Pros: Fast, modern, and widely supported.
	* Cons: May cause issues if the NodeList contains duplicate elements.
3. **[]\slice.call(listItems)**:
	* Pros: Works in older browsers and versions of JavaScript.
	* Cons: Less efficient than the other options, and less readable.
4. **for each push**:
	* Pros: Simple and easy to understand for those familiar with array methods.
	* Cons: Less efficient than the other options, and may lead to performance issues if not optimized properly.
5. **for each cached new Array with known listItems length**:
	* Pros: Efficient and scalable, especially when dealing with large datasets.
	* Cons: Requires creating a new array with a known length, which can be memory-intensive.
6. **for loop cached length**:
	* Pros: Similar to option 5, but uses a traditional for loop instead of an arrow function.
	* Cons: Less efficient than option 5 due to the overhead of the loop.

**Other Considerations**

When choosing an approach, consider the following factors:

* Browser support: If you need to support older browsers or versions of JavaScript, options 2 and 6 might be a better choice.
* Performance: Options 1, 3, and 4 are generally faster than options 5 and 6, but may have varying degrees of overhead depending on the specific use case.
* Code readability and maintainability: Option 1 is often considered the most readable and maintainable due to its concise nature.

**Libraries and Special Features**

None of the tested libraries were mentioned. However, it's worth noting that some libraries like Lodash or Ramda provide additional functions for working with arrays, which might be useful in certain scenarios.

Special JavaScript features used in this benchmark are:

* Spread operator (`...`): Used in option 2.
* `from()` method: Used in option 1.
* Arrow function syntax: Used in options 5 and 6.
* Traditional for loop syntax: Used in options 4 and 6.

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

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from on NodeList	5517.7 Ops/sec
Spread on NodeList	5754.1 Ops/sec
[].slice.call	8421.5 Ops/sec
for each push	8360.5 Ops/sec
for each cached new Array with know listItems length	8637.2 Ops/sec
for loop cached length	5637.9 Ops/sec

Related benchmarks:

Covert Node List to array (version: 0)

Comparing performance of: Array.from on NodeList vs Spread on NodeList vs [].slice.call vs for each push vs for each cached new Array with know listItems length vs for loop cached length

Created: 2 years ago by: Registered User

Jump to the latest result

Array.from on NodeList

Spread on NodeList

[].slice.call

for each push

for each cached new Array with know listItems length

for loop cached length

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