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: one year ago by: Guest

Jump 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');

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

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

Browser/OS: Firefox 128 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
replaceWith()	643543.9 Ops/sec
.outerHTML	676893.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks: