Benchmark: Append children VS appendChild in loop VS replaceChildren

HTML Preparation code:

<div id="root"></div>

Script Preparation code:

var root = document.getElementById('root');
var children = [
    document.createElement('span'),
    document.createElement('span'),
    document.createElement('span'),
    document.createElement('span'),
    document.createElement('span'),
];

Tests:

append
root.append(...children);
appendChild in loop
for (let i = 0; i < 5; i++) { root.appendChild(children[i]); }
replaceChildren
root.replaceChildren(...children)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild in loop
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

Test name	Executions per second
append	11523.2 Ops/sec
appendChild in loop	12630.2 Ops/sec
replaceChildren	11805.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Definition**

The test is designed to measure the performance difference between three methods for appending children to an HTML element:

1. `append()`
2. Appending elements in a loop using `appendChild()`
3. Replacing existing children with new ones using `replaceChildren()`

**Script Preparation Code**

This code sets up the testing environment:
```javascript
var root = document.getElementById('root');
var children = [
    document.createElement('span'),
    document.createElement('span'),
    document.createElement('span'),
    document.createElement('span'),
    document.createElement('span')
];
```
It creates an HTML element with the ID "root" and five child elements, which will be used as test subjects.

**Html Preparation Code**

This code defines the HTML structure:
```html
<div id="root"></div>
```
The HTML element with the ID "root" is created to serve as the container for the child elements.

**Individual Test Cases**

There are three test cases:

1. **append()**: This test case uses the `append()` method to add the child elements to the root element.
2. **appendChild in loop**: This test case loops five times, appending each child element to the root element using `appendChild()`.
3. **replaceChildren**: This test case replaces the existing children with new ones using the `replaceChildren()` method.

**Pros and Cons of Each Approach**

1. **append()**:
	* Pros: Simple and straightforward, no need for loops or indexing.
	* Cons: May be slower due to the overhead of appending multiple elements at once.
2. **appendChild in loop**:
	* Pros: Allows for more control over the appendment process, can be faster if done efficiently.
	* Cons: Requires explicit looping, which may add unnecessary complexity.
3. **replaceChildren**:
	* Pros: Can be faster when dealing with large numbers of children, as it replaces all existing ones at once.
	* Cons: May require more memory to store the new child elements, and can be slower if the root element is not empty.

**Library:**

None explicitly mentioned in the provided code. However, using `document.createElement()` implicitly uses the browser's native DOM API.

**Special JS Features/Syntax:**

None mentioned.

**Other Considerations**

* The benchmark measures executions per second (ExecutionsPerSecond), which provides a good indication of performance.
* The test is run on Firefox 129, so any results may not be applicable to other browsers or versions.
* It's worth noting that the `append()` method in modern JavaScript engines (like V8) often involves batching and caching elements, which can affect performance.

**Alternatives:**

For a more comprehensive benchmarking suite, you might consider adding additional test cases, such as:

* Using `insertBefore()` or `insertAfter()`
* Implementing custom appendment logic using Web Workers or other concurrency techniques
* Benchmarks with different types of child elements (e.g., images, text nodes, etc.)

However, the current benchmark provides a solid foundation for comparing the performance of these three common methods.

Related benchmarks:

Append children VS appendChild in loop VS replaceChildren (version: 0)

Comparing performance of: append vs appendChild in loop vs replaceChildren

Created: 2 years ago by: Guest

Jump to the latest result

append

appendChild in loop

replaceChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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