Benchmark: for loop vs Array.from Nodelist

HTML Preparation code:

<div id="x">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Script Preparation code:

var x = document.getElementById('x');

Tests:

Array.from
const array = Array.from(x.children);
for loop
const array = []; for (let i = 0; i < x.children.length; i++) { array.push(x.children[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The provided benchmark definition represents two test cases that compare the performance of creating an array using `Array.from()` versus a traditional for loop. The script preparation code is set to retrieve an HTML node with the id "x", which contains 10 child nodes (a NodeList). The HTML preparation code creates this nested DOM structure.

**Benchmark Options**

There are two options being compared:

1. **`Array.from()`**: This method creates a new array from an iterable or an array-like object, such as a NodeList.
2. **Traditional For Loop**: This approach uses a for loop to iterate over the NodeList and push each child node into a new array.

**Pros and Cons of Each Approach**

* **`Array.from()`**:
	+ Pros:
		- Concise and expressive syntax
		- Creates a new array, which is often preferred in modern JavaScript code
		- Can be more readable and maintainable for large datasets
	+ Cons:
		- May incur additional overhead due to the creation of a new array
		- Can be slower if the input iterable is very large
* **Traditional For Loop**:
	+ Pros:
		- Less overhead compared to `Array.from()`, as it only iterates over the NodeList and pushes elements into an existing array
		- Can be more efficient for very large datasets, as it avoids creating a new array
	+ Cons:
		- Syntax can be less readable and more verbose, especially for complex iterations

**Library Usage**

In this benchmark, `Array.from()` is using the built-in JavaScript method `Array.from()`, which was introduced in ECMAScript 2015 (ES6).

**Special JS Features or Syntax**

There are no special features or syntax used in this benchmark. The code relies on standard JavaScript and DOM API methods.

**Other Alternatives**

If you were to create a similar benchmark, you might consider adding additional test cases, such as:

* Using `Map()` instead of arrays for larger datasets
* Comparing performance with modern JavaScript features like `forEach()`, `reduce()`, or `map()`
* Investigating the impact of array length on performance (e.g., using 1000, 10,000, or 1 million elements)
* Examining browser-specific optimizations or quirks

Keep in mind that these alternatives would require modifying the benchmark definition and script preparation code to accommodate the new test cases.

Related benchmarks:

for loop vs Array.from Nodelist (version: 0)

Comparing performance of: Array.from vs for loop

Created: 4 years ago by: Guest

Jump to the latest result

Array.from

for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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