Benchmark: Array of child nodes

HTML Preparation code:

<ul id="list">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
</ul>

Script Preparation code:

var list=document.querySelector('#list');
var childNodes = list.childNodes;

Tests:

Array.from
var l1 = Array.from(list.childNodes)
loop firstChild+nextSibling
var l2 = []; for (var node = list.firstChild; node; node = node.nextSibling) { l2.push(node); }
loop index
var l3 = []; for (var i = 0, len = childNodes.length; i < len; i++) { l3.push(childNodes[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
loop firstChild+nextSibling
loop index

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0

Browser/OS: Firefox 118 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	294068.8 Ops/sec
loop firstChild+nextSibling	1301894.9 Ops/sec
loop index	786542.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Test Case: Creating an array from child nodes**

The test case uses HTML to create an unordered list (`<ul>`) with 10 `<li>` elements. The script preparation code retrieves the child nodes of the list using `document.querySelector` and stores them in the variable `childNodes`.

**Options Compared:**

1. **Array.from()**
2. **Looping through firstChild and nextSibling**
3. **Looping through index (i)**

**What's Being Tested:**

Each option is tested by creating an array from the child nodes using a different approach:

* `Array.from()`: uses the spread operator to create an array from the child nodes.
* Looping through `firstChild` and `nextSibling`: manually iterates over the child nodes using the DOM's `firstChild` and `nextSibling` properties.
* Looping through index `(i)`: manually iterates over the child nodes using a for loop with an index variable.

**Pros and Cons:**

1. **Array.from()**
	* Pros:
		+ Concise and readable code
		+ Modern JavaScript feature
	* Cons:
		+ May have performance overhead due to the spread operator's complexity
2. **Looping through firstChild and nextSibling**
	* Pros:
		+ Simple and straightforward code
	* Cons:
		+ Can be slower than `Array.from()` due to DOM property access
3. **Looping through index (i)**
	* Pros:
		+ Fast and efficient code using direct array indexing
	* Cons:
		+ More verbose and less readable code

**Library Used:**

None explicitly mentioned, but the use of `document.querySelector` suggests the test case is checking compatibility with modern web browsers.

**Special JS Feature or Syntax:**

None mentioned.

**Other Considerations:**

The benchmark's focus on creating an array from child nodes highlights the importance of performance and conciseness in JavaScript code. The test cases also demonstrate the trade-offs between different approaches, such as readability vs. speed.

For those interested in alternatives:

* Other methods to create an array from child nodes could be explored, such as using `Array.prototype.slice()` or a custom function.
* Comparing other array-related functions like `map()`, `filter()`, or `forEach()` could also provide interesting results.

Related benchmarks:

Array of child nodes (version: 0)

Comparing performance of: Array.from vs loop firstChild+nextSibling vs loop index

Created: one year ago by: Registered User

Jump to the latest result

Array.from

loop firstChild+nextSibling

loop index

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