Benchmark: childNodes vs children vs firstChild/nextSibling vs firstElementChild/nextElementSibling

HTML Preparation code:

<html>

<body>
    <div id='test'>
        <div name='a'></div>
        <div name='b'></div>
        <div name='c'></div>
    </div>
</body>

</html>

Script Preparation code:

var parent = document.getElementById('test');

Tests:

childNodes
parent.childNodes.forEach(function (node) { let n = node; });
children
for (let i = 0; i < parent.children.length; i++) { let n = parent.children[i]; }
firstChild nextSibling
let elem = parent.firstChild; do { let n = elem; } while (elem = elem.nextSibling)
firstElementChild nextElementChild
let elem = parent.firstElementChild; do { let n = elem; } while (elem = elem.nextElementSibling)
ChildNodes2
let children = parent.childNodes; for (let i = 0; i < children.length; i++) { let n = children[i]; }

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

firstElementChild nextElementChild

9.2M/s

firstChild nextSibling

6.5M/s

ChildNodes2

2.6M/s

children

1.3M/s

childNodes

905K/s

Fastest: firstElementChild nextElementChild (10.2x faster)

View exact numbers

✓ firstElementChild nextElementChild: 9,202,290 ops/sec
• firstChild nextSibling: 6,537,164 ops/sec
• ChildNodes2: 2,551,081 ops/sec
• children: 1,349,660 ops/sec
• childNodes: 905,020 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
childNodes
children
firstChild nextSibling
firstElementChild nextElementChild
ChildNodes2

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

firstElementChild nextElementChild

11.1M/s

firstChild nextSibling

8.0M/s

ChildNodes2

3.2M/s

children

1.7M/s

childNodes

1.2M/s

View exact numbers

Test name	Executions per second
✓ firstElementChild nextElementChild	11,051,960 Ops/sec
firstChild nextSibling	7,975,128 Ops/sec
ChildNodes2	3,174,581 Ops/sec
children	1,717,998 Ops/sec
childNodes	1,170,831 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Description**

The benchmark measures the fastest way to list children of an HTML element in JavaScript. The test compares four different approaches:

1. **childNodes**: Iterating over the child nodes of an element using `forEach`.
2. **children**: Using the `children` property directly on the parent element.
3. **firstChild/nextSibling**: Traversing from the first child node to its next sibling, repeatedly accessing each node.
4. **firstElementChild/nextElementSibling**: Similar to the previous approach, but using the `firstElementChild` and `nextElementSibling` properties.

**Options Compared**

The options being compared are:

* Iterating over an array of child nodes (`childNodes`, `children`)
* Traversing through a node's siblings (`firstChild/nextSibling`, `firstElementChild/nextElementSibling`)

**Pros and Cons**

1. **childNodes**:
	* Pros: Generally faster, as it only iterates over the actual child nodes.
	* Cons: May require more memory access, as each node needs to be accessed individually.
2. **children**:
	* Pros: Typically faster, as it's a direct property access and doesn't require extra traversal.
	* Cons: May not work for all elements (e.g., those with no children), and can be slower if the array is very large.
3. **firstChild/nextSibling**:
	* Pros: Can be more efficient for large arrays, as it only accesses each node once.
	* Cons: Requires an initial iteration to find the first child, and may require more memory access.
4. **firstElementChild/nextElementSibling**:
	* Pros: Similar benefits to `firstChild/nextSibling`, but with more modern browsers that support `firstElementChild`.
	* Cons: Still requires an initial iteration, and may not work for older browsers.

**Library and Syntax**

There is no specific library being tested in this benchmark. However, the use of modern JavaScript features like arrow functions (`=>`) and template literals (`\r\n\r\n`) suggests that the test is designed to run on a relatively recent browser.

**Special JS Features or Syntax**

The test doesn't use any special JavaScript features or syntax beyond what's mentioned above (arrow functions, template literals). If you're curious about other modern features like async/await, let me know!

**Alternatives**

Other alternatives for listing children of an HTML element include:

* Using a library like jQuery, which provides a `children()` method.
* Using a library like React, which uses a virtual DOM and can efficiently traverse child nodes.
* Implementing a custom iterator function to iterate over the child nodes.

Keep in mind that these alternatives might not provide the same level of performance as the options being compared in this benchmark.

childNodes vs children vs firstChild/nextSibling vs firstElementChild/nextElementSibling (version: 0)

Fastest way to list children

Comparing performance of: `childNodes vs children vs firstChild nextSibling vs firstElementChild nextElementChild vs ChildNodes2`

Created: 4 years ago by: Guest

Go to the latest result

childNodes

children

firstChild nextSibling

firstElementChild nextElementChild

ChildNodes2

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

childNodes vs children vs firstChild/nextSibling vs firstElementChild/nextElementSibling (version: 0)

Fastest way to list children

Comparing performance of: childNodes vs children vs firstChild nextSibling vs firstElementChild nextElementChild vs ChildNodes2

Created: 4 years ago by: Guest

Go to the latest result

childNodes

children

firstChild nextSibling

firstElementChild nextElementChild

ChildNodes2

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `childNodes vs children vs firstChild nextSibling vs firstElementChild nextElementChild vs ChildNodes2`