Benchmark: moving childNodes from one parent node to another

HTML Preparation code:

<html>

<body></body>

</html>

Script Preparation code:

const CHILDREN_COUNT = 1000;
var containerDom = document.createElement('div');
for (var i = 0; i < CHILDREN_COUNT; i++) {
  containerDom.appendChild(document.createElement('span'));
}
document.body.appendChild(containerDom);
var newContainerDom = document.createElement('div');

Tests:

forEach loop childNodes
const childNodes = containerDom.childNodes; childNodes.forEach(child => { newContainerDom.appendChild(child); });
for loop childNodes
const childNodes = containerDom.childNodes; for (let i = 0, len = childNodes.length; i < len; i++) { const child = childNodes[i]; newContainerDom.appendChild(child); }
loop firstChild and append
let firstChild = containerDom.firstChild; while (firstChild) { newContainerDom.appendChild(firstChild); firstChild = containerDom.firstChild; }
loop lastChild and prepend
let lastChild = containerDom.lastChild; while (lastChild) { newContainerDom.prependChild(lastChild); lastChild = containerDom.lastChild; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach loop childNodes
for loop childNodes
loop firstChild and append
loop lastChild and prepend

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/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

loop firstChild and append

94.1M/s

loop lastChild and prepend

92.8M/s

for loop childNodes

59.8M/s

forEach loop childNodes

17.0M/s

View exact numbers

Test name	Executions per second
✓ loop firstChild and append	94,081,832 Ops/sec
loop lastChild and prepend	92,752,824 Ops/sec
for loop childNodes	59,809,888 Ops/sec
forEach loop childNodes	16,960,022 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 JSON data and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to measure the performance of moving child nodes from one parent node to another using different JavaScript loops. The script preparation code creates a container DOM element with 1000 child elements (span tags), which are then appended or prepended to a new container DOM element in each test case.

**Options Compared**

There are four test cases:

1. **`forEach` loop childNodes**: Uses the `forEach` method to iterate over the child nodes.
2. **For loop childNodes**: Uses a traditional for loop with an index variable to iterate over the child nodes.
3. **Loop firstChild and append**: Uses a while loop to iterate over the child nodes, starting from the first child node (`firstChild`) and appending it to the new container DOM element.
4. **Loop lastChild and prepend**: Uses a while loop to iterate over the child nodes, starting from the last child node (`lastChild`) and prepending it to the new container DOM element.

**Pros and Cons of Each Approach**

1. **`forEach` loop childNodes**:
	* Pros: Easy to read and maintain, less chance of off-by-one errors.
	* Cons: May be slower due to the overhead of function calls.
2. **For loop childNodes**:
	* Pros: Can be faster since it avoids function call overhead, but requires more manual indexing.
	* Cons: More prone to off-by-one errors and requires more maintenance.
3. **Loop firstChild and append**:
	* Pros: Avoids off-by-one errors since we start from the first child node, reduces chance of unexpected behavior.
	* Cons: Can be slower due to the use of a while loop, may require more complex logic.
4. **Loop lastChild and prepend**:
	* Pros: Similar advantages to `firstChild` loop, but prepends instead of appends.
	* Cons: May require additional checks for edge cases (e.g., empty child nodes).

**Library Used**

None explicitly mentioned in the provided data.

**Special JS Feature or Syntax**

No special features or syntax are used beyond standard JavaScript features. However, it's worth noting that `forEach` and `for` loops are supported by most modern browsers, whereas older browsers may not support these methods.

**Other Considerations**

The benchmark measures the performance of moving child nodes from one parent node to another, which is a relatively simple operation in JavaScript. The results will likely depend on factors such as:

* Browser version and performance optimizations
* System resource availability (CPU, memory)
* DOM manipulation complexity

In terms of alternatives, other options for moving child nodes might include using `Array.prototype.slice()` or `Array.prototype.map()` to create a new array of child nodes, which could potentially be faster. However, these approaches may require additional logic and overhead.

Overall, the benchmark provides a good starting point for comparing the performance of different loop implementations in JavaScript, allowing developers to choose the most efficient approach for their specific use cases.

moving childNodes from one parent node to another (version: 0)

moving childNodes from one parent node to another

Comparing performance of: `forEach loop childNodes vs for loop childNodes vs loop firstChild and append vs loop lastChild and prepend`

Created: 2 years ago by: Registered User

Go to the latest result

forEach loop childNodes

for loop childNodes

loop firstChild and append

loop lastChild and prepend

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

moving childNodes from one parent node to another (version: 0)

moving childNodes from one parent node to another

Comparing performance of: forEach loop childNodes vs for loop childNodes vs loop firstChild and append vs loop lastChild and prepend

Created: 2 years ago by: Registered User

Go to the latest result

forEach loop childNodes

for loop childNodes

loop firstChild and append

loop lastChild and prepend

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: `forEach loop childNodes vs for loop childNodes vs loop firstChild and append vs loop lastChild and prepend`