Benchmark: childNodes vs children vs firstChild/nextSibling vs firstElementChild/nextElementSibling (optimized html)

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]; }

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
childNodes	948409.9 Ops/sec
children	818353.0 Ops/sec
firstChild nextSibling	6057810.5 Ops/sec
firstElementChild nextElementChild	6061825.5 Ops/sec
ChildNodes2	2676689.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches on various browsers and devices.

The provided benchmark definition json represents four test cases:

1. `childNodes`
2. `children`
3. `firstChild nextSibling` (without optimization)
4. `firstElementChild nextElementChild`

**Options Compared**

Each test case compares two or more options for listing children of an HTML element:

* `childNodes`: traversing the child nodes using `forEach()` loop.
* `children`: traversing the children directly using a `for...in` loop.
* `firstChild nextSibling`: traversing the first child node and its subsequent siblings using a `while` loop.

In addition to these options, two optimized versions of `firstChild nextSibling` are included:

1. `firstElementChild nextElementSibling`: traversing only the element children using `firstElementChild` and `nextElementSibling`.
2. `ChildNodes2`: a non-standard approach that uses `childNodes` to traverse the elements (this is not a recommended or supported method).

**Pros and Cons of Different Approaches**

1. **childNodes**: This method traverses all child nodes, including text nodes, comments, and other types of content. While it provides the most comprehensive list, it can be slower due to the need to process each node.
2. **children**: This method only traverses element children, making it faster than `childNodes` for elements with only child elements. However, it may skip some child nodes if they are not elements.
3. **firstChild nextSibling** (without optimization): This method traverses only the first child node and its subsequent siblings, which can be slower than other methods for elements with many children.
4. **firstElementChild nextElementSibling**: This optimized version only traverses element children, making it faster than `firstChild nextSibling` without optimization.
5. **ChildNodes2**: This non-standard approach uses `childNodes` to traverse the elements, which can be slower and less reliable than other methods.

**Library and Special JS Features**

The provided benchmark code does not use any libraries or special JavaScript features beyond the standard DOM API.

**Other Alternatives**

Other alternatives for listing children of an HTML element include:

* Using `querySelectorAll()` instead of `children` or `childNodes`.
* Using a library like jQuery to traverse elements.
* Using a more efficient traversal approach, such as using a stack or queue data structure.

It's worth noting that the performance differences between these approaches can vary depending on the specific use case and browser being tested. MeasureThat.net provides a useful platform for comparing the performance of different approaches and identifying the most efficient solutions.

Related benchmarks:

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

Fastest way to list children

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

Created: one year ago by: Guest

Jump to the latest result

childNodes

children

firstChild nextSibling

firstElementChild nextElementChild

ChildNodes2

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