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: 2 months 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

Test name	Executions per second
forEach loop childNodes	16960022.0 Ops/sec
for loop childNodes	59809888.0 Ops/sec
loop firstChild and append	94081832.0 Ops/sec
loop lastChild and prepend	92752824.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

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: 10 months ago by: Registered User

Jump to the latest result

forEach loop childNodes

for loop childNodes

loop firstChild and append

loop lastChild and prepend

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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