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)

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

replaceChildren

79K/s

append

78K/s

appendChild in loop

74K/s

View exact numbers

✓ replaceChildren: 78,713 ops/sec
• append: 77,685 ops/sec
• appendChild in loop: 74,498 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 5 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:153.0) Gecko/20100101 Firefox/153.0

Browser/OS: Firefox 153 on Linux

View result in a separate tab

appendChild in loop

5K/s

replaceChildren

3K/s

append

3K/s

View exact numbers

Test name	Executions per second
✓ appendChild in loop	5,265 Ops/sec
replaceChildren	2,835 Ops/sec
append	2,815 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.

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

Go to the latest result

append

appendChild in loop

replaceChildren

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

append

appendChild in loop

replaceChildren

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

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: `append vs appendChild in loop vs replaceChildren`