Benchmark: replaceWith vs replaceChild

HTML Preparation code:

<html>

  
  
</html>

Script Preparation code:

parentBox = document.createElement('div');
document.body.appendChild(parentBox);

Tests:

replaceWith
var Iframe1 = []; var Video1 = []; for (var i = 0; i < 10; i++) { Iframe1[i] = document.createElement('iframe'); parentBox.appendChild(Iframe1[i]); Video1[i] = document.createElement('video'); } for (var w = 9; w > -1; w--) { Iframe1[w].replaceWith(Video1[w]); }
replaceChild
var Iframe2 = []; var Video2 = []; for (var i = 0; i < 10; i++) { Iframe2[i] = document.createElement('iframe'); parentBox.appendChild(Iframe2[i]); Video2[i] = document.createElement('video'); } for (var c = 9; c > -1; c--) { parentBox.replaceChild(Video2[c], Iframe2[c]); }

Historical Performance Data aggregated from 71 community runs

Desktop Results:

Chrome 55 runs

replaceWith

19/s

replaceChild

14/s

Fastest: replaceWith (1.3x faster)

View exact numbers

✓ replaceWith: 19 ops/sec
• replaceChild: 14 ops/sec

Firefox 16 runs

replaceWith

73/s

replaceChild

59/s

Fastest: replaceWith (1.2x faster)

View exact numbers

✓ replaceWith: 73 ops/sec
• replaceChild: 59 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
replaceWith
replaceChild

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Windows

View result in a separate tab

replaceWith

4/s

replaceChild

3/s

View exact numbers

Test name	Executions per second
✓ replaceWith	4 Ops/sec
replaceChild	3 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 benchmark and its options, explaining what's tested, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance difference between two DOM replacement methods: `replaceWith` and `replaceChild`. The test creates a sequence of 10 iframes and videos, appends them to a container element (`parentBox`), and then replaces each iframe with its corresponding video using one of the two methods.

**Options Compared**

1. **`replaceWith`**: Replaces an existing node with a new node.
	* Pros:
		+ Simpler implementation, as it only involves replacing the old node with the new one.
		+ Less memory allocation and garbage collection required.
	* Cons:
		+ May be slower due to the overhead of creating a temporary clone or copying the old node's content.
2. **`replaceChild`**: Replaces an existing child node with a new child node.
	* Pros:
		+ More efficient, as it only involves replacing the old node and updating the DOM tree pointers.
		+ Less memory allocation and garbage collection required.
	* Cons:
		+ May be slower due to the overhead of creating a temporary clone or copying the old node's content.

**Library Used**

None. The benchmark uses native JavaScript DOM methods.

**Special JS Feature/ Syntax**

None mentioned in this benchmark.

**Other Considerations**

* The test creates a large number of elements (10 iframes and videos) to demonstrate the performance difference between the two methods.
* The use of `replaceWith` and `replaceChild` methods is relevant to web developers, as they are commonly used for DOM manipulation.

**Alternative Approaches**

1. **`appendChild` followed by `removeChild`**: Instead of replacing the old node, an alternative approach would be to append the new node to the parent element and then remove the old node. This method may have similar performance characteristics to `replaceWith`, but with slightly more overhead due to the extra DOM operations.
2. **Using a library or utility function**: Depending on the specific use case, using a library or utility function that provides optimized implementation of DOM replacement methods may be beneficial. For example, some libraries like jQuery provide a `.replace()` method that uses `replaceChild` internally.

In summary, the benchmark measures the performance difference between two common DOM replacement methods: `replaceWith` and `replaceChild`. The test creates a large number of elements to demonstrate the performance characteristics of each method, and no special JavaScript features or libraries are used.

replaceWith vs replaceChild (version: 25) Benchmark.js

replace dom

Comparing performance of: `replaceWith vs replaceChild`

Created: 5 years ago by: Registered User

Go to the latest result

replaceWith

replaceChild

Historical Performance Data aggregated from 71 community runs

Desktop Results:

Chrome 55 runs

Firefox 16 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

replaceWith vs replaceChild (version: 25) Benchmark.js

replace dom

Comparing performance of: replaceWith vs replaceChild

Created: 5 years ago by: Registered User

Go to the latest result

replaceWith

replaceChild

Historical Performance Data aggregated from 71 community runs

Desktop Results:

Chrome 55 runs

Firefox 16 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: `replaceWith vs replaceChild`