Benchmark: Swap element "in-place" with replaceWith() vs .outerHTML

Swap element "in-place" with replaceWith() vs .outerHTML (version: 0)

Swap an DOM element with replaceWith() and compare with the .outerHTML method of replacing its content instead. replaceWith() - Pretty one-liner - Breaks element attributes, inline style and scrollHeight/scrollWidth (fully re-render element) .outerHTML - Keeps attributes, inline style and scrollHeight/scrollWidth (partially re-render element) - Breaks previous element references, "hacky" looking and sometimes perceptible (element may flash for a split second)

Comparing performance of: `replaceWith() vs .outerHTML`

Created: 3 years ago by: Guest

Go to the latest result

HTML Preparation code:

<p id='myParagraph'>Hello World</p>

Script Preparation code:

var myParagraph = document.getElementById('myParagraph');

Tests:

replaceWith()
var mySpan = document.createElement('span'); myParagraph.replaceWith(mySpan);
.outerHTML
myParagraph.outerHTML = myParagraph.outerHTML.replace('<p', '<span');

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

replaceWith()

2.7M/s

.outerHTML

2.7M/s

View exact numbers

✓ replaceWith(): 2,730,815 ops/sec
• .outerHTML: 2,665,770 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()
.outerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 16; Mobile; rv:140.0) Gecko/140.0 Firefox/140.0

Browser/OS: Firefox Mobile 140 on Android

View result in a separate tab

.outerHTML

2.5M/s

replaceWith()

2.0M/s

View exact numbers

Test name	Executions per second
✓ .outerHTML	2,478,108 Ops/sec
replaceWith()	1,988,019 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark definition and explain what's being tested.

**Benchmark Definition:**
The test is comparing two approaches to swap an existing DOM element with a new one:

1. **replaceWith()**: This method replaces the contents of an element with a new content node, breaking any attributes, inline styles, or scrollHeight/scrollWidth properties of the original element.
2. **outerHTML**: This property allows you to set the HTML content of an element without breaking its existing attributes, inline styles, or scrollHeight/scrollWidth properties.

**Pros and Cons:**

* **replaceWith()**:
	+ Pros:
		- Simple, one-liner syntax.
		- Replaces the entire element with a new node, which can be beneficial for performance-critical code.
	+ Cons:
		- Breaks any existing attributes, inline styles, or scrollHeight/scrollWidth properties of the original element.
		- Can lead to noticeable flickering or flashing of elements when swapping out content rapidly.
* **outerHTML**:
	+ Pros:
		- Keeps the original element's attributes, inline styles, and scrollHeight/scrollWidth properties intact.
		- Less likely to cause flickering or flashing when swapping out content.
	+ Cons:
		- Requires setting multiple values for `innerHTML`, which can be verbose.

**Library and Syntax:**
The test uses two built-in JavaScript methods:

1. **replaceWith()**: This method is part of the DOM API, specifically used on HTML elements to replace its contents with a new content node.
2. **outerHTML**: This property is also part of the DOM API, allowing you to set the HTML content of an element without modifying its existing properties.

**Special JS Feature or Syntax:**
The test does not use any special JavaScript features or syntax beyond the standard DOM API methods. However, it's worth noting that older browsers might have had issues with `replaceWith()` due to its re-deriving nature, which can lead to performance regressions in certain cases.

**Alternatives:**
If you're looking for alternative approaches to swap an element, consider:

1. **appendChild()**: Instead of replacing the entire element, you could append a new node to it using `appendChild()`, followed by removing the original child node.
2. **Element insertion method**: You can use a library like jQuery's `.replaceWith()` or similar methods provided by other libraries to create a more robust swapping mechanism.
3. **Manually rendering elements**: In some cases, you might need to manually render new content into an element using techniques like `innerHTML` and CSS transformations.

For the given benchmark test, using `replaceWith()` has a slight edge in terms of performance due to its optimized implementation under the hood. However, when it comes to code readability and avoiding potential flickering issues, `outerHTML` might be a better choice for certain use cases.

Swap element "in-place" with replaceWith() vs .outerHTML (version: 0)

Comparing performance of: replaceWith() vs .outerHTML

Created: 3 years ago by: Guest

Go to the latest result

replaceWith()

.outerHTML

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 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 .outerHTML`