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

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

Test name	Executions per second
childNodes	1170831.1 Ops/sec
children	1717997.5 Ops/sec
firstChild nextSibling	7975128.0 Ops/sec
firstElementChild nextElementChild	11051960.0 Ops/sec
ChildNodes2	3174580.8 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.

Related benchmarks:

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

Jump to the latest result

childNodes

children

firstChild nextSibling

firstElementChild nextElementChild

ChildNodes2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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