Benchmark: replaceChild vs replaceChildren vs documentFragment

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var elements = [document.createElement('div'), document.createElement('div')];
var fragment = document.createDocumentFragment();
var container = document.getElementById('container');

elements.forEach(element => fragment.appendChild(element));
container.appendChild(fragment);

Tests:

replaceChild
var changeIndex = 1; elements[changeIndex] = document.createElement('div'); container.replaceChild(elements[changeIndex], container.children[changeIndex]);
replaceChildren
var changeIndex = 1; elements[changeIndex] = document.createElement('div'); container.replaceChildren(elements)
append documentFragment
var changeIndex = 1; var newChildren = document.createDocumentFragment(); elements[changeIndex] = document.createElement('div'); elements.forEach(element => newChildren.appendChild(element)); while(container.firstChild) { container.firstChild.remove(); } container.appendChild(newChildren)

Historical Performance Data aggregated from 63 community runs

Desktop Results:

Chrome 42 runs

replaceChild

796K/s

replaceChildren

494K/s

append documentFragment

382K/s

Fastest: replaceChild (2.1x faster)

View exact numbers

✓ replaceChild: 796,001 ops/sec
• replaceChildren: 493,895 ops/sec
• append documentFragment: 381,782 ops/sec

Firefox 15 runs

replaceChild

614K/s

replaceChildren

357K/s

append documentFragment

10K/s

Fastest: replaceChild (59.0x faster)

View exact numbers

✓ replaceChild: 613,886 ops/sec
• replaceChildren: 356,646 ops/sec
• append documentFragment: 10,402 ops/sec

Mobile Results:

Safari 6 runs

replaceChild

2.6M/s

replaceChildren

2.4M/s

append documentFragment

1.2M/s

Fastest: replaceChild (2.2x faster)

View exact numbers

✓ replaceChild: 2,594,104 ops/sec
• replaceChildren: 2,400,504 ops/sec
• append documentFragment: 1,191,640 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
replaceChild
replaceChildren
append documentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Mac OS X 10.15

View result in a separate tab

replaceChild

250K/s

replaceChildren

120K/s

append documentFragment

10K/s

View exact numbers

Test name	Executions per second
✓ replaceChild	249,575 Ops/sec
replaceChildren	119,923 Ops/sec
append documentFragment	10,402 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmark test case created on the MeasureThat.net website, specifically designed to measure the performance of JavaScript's DOM manipulation methods.

**Benchmark Purpose**

The benchmark tests three different approaches for replacing or appending child elements in the Document Object Model (DOM):

1. `replaceChild`: Replaces an existing child element with a new one.
2. `replaceChildren`: Replaces all child elements at once.
3. `append documentFragment`: Appends multiple elements to the DOM using a document fragment.

**Options Compared**

The benchmark compares the performance of each approach on various browsers and devices.

**Pros and Cons of Each Approach:**

1. **`replaceChild`**:
	* Pros: Efficient when only replacing one element.
	* Cons: Less efficient for large sets of elements or when frequent changes are needed, as it requires creating a new DOM node and updating the parent's `childNodes` list.
2. **`replaceChildren`**:
	* Pros: More efficient than `replaceChild` for large sets of elements or when frequent changes are needed.
	* Cons: Requires more memory allocation and can lead to increased garbage collection overhead, as all child nodes need to be removed from the DOM before new ones are appended.
3. **`append documentFragment`**:
	* Pros: Efficient for appending multiple elements at once, as it avoids unnecessary DOM node creation and updates.
	* Cons: Requires more memory allocation upfront to create a document fragment, which can be a concern for very large sets of elements.

**Other Considerations**

When working with the DOM, it's essential to consider factors like:

* Browser support: Different browsers may have varying levels of support for these methods or their implementations.
* Performance-critical code: In performance-critical sections, optimizing DOM manipulation can lead to significant speedups.
* Code readability and maintainability: Choosing the right approach depends on the specific use case and coding style.

**Library Usage**

The provided benchmark uses no external libraries beyond standard JavaScript functionality. However, for larger projects or more complex DOM manipulations, you might consider using libraries like:

* jQuery
* React
* Angular

These frameworks provide optimized DOM manipulation APIs that can significantly improve performance in many cases.

**Special JS Features/Syntax**

None of the benchmark's test cases utilize any special JavaScript features or syntax beyond standard ECMAScript features.

replaceChild vs replaceChildren vs documentFragment (version: 0)

Comparing performance of: `replaceChild vs replaceChildren vs append documentFragment`

Created: 4 years ago by: Registered User

Go to the latest result

replaceChild

replaceChildren

append documentFragment

Historical Performance Data aggregated from 63 community runs

Desktop Results:

Chrome 42 runs

Firefox 15 runs

Mobile Results:

Safari 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

replaceChild vs replaceChildren vs documentFragment (version: 0)

Comparing performance of: replaceChild vs replaceChildren vs append documentFragment

Created: 4 years ago by: Registered User

Go to the latest result

replaceChild

replaceChildren

append documentFragment

Historical Performance Data aggregated from 63 community runs

Desktop Results:

Chrome 42 runs

Firefox 15 runs

Mobile Results:

Safari 6 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: `replaceChild vs replaceChildren vs append documentFragment`