Benchmark: replaceWith vs innerHTML

HTML Preparation code:

<div class="image"></div>

Tests:

replaceWith
const image = document.createElement('div'); image.classList.add('image'); const img = document.createElement('img'); img.setAttribute('src', 'http://www.google.com'); image.appendChild(img); document.querySelector('.image').replaceWith(image);
innerHTML
const image = document.querySelector('.image'); image.innerHTML = ''; const img = document.createElement('img'); img.setAttribute('src', 'http://www.google.com'); image.appendChild(img);

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 17 runs

innerHTML

214K/s

replaceWith

174K/s

Fastest: innerHTML (1.2x faster)

View exact numbers

✓ innerHTML: 214,117 ops/sec
• replaceWith: 174,425 ops/sec

Firefox 5 runs

innerHTML

35K/s

replaceWith

28K/s

Fastest: innerHTML (1.3x faster)

View exact numbers

✓ innerHTML: 35,078 ops/sec
• replaceWith: 27,911 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
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

innerHTML

214K/s

replaceWith

189K/s

View exact numbers

Test name	Executions per second
✓ innerHTML	214,117 Ops/sec
replaceWith	189,441 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance difference between two approaches for replacing HTML elements: `replaceWith` and `innerHTML`. The tests are designed to measure the execution time of these two methods in a JavaScript benchmark.

**Options compared**

Two options are being compared:

1. **`replaceWith`**: This method replaces the child element of an existing DOM node with a new element, without appending or inserting the new element. It is implemented as `element.parentNode.replaceChild(element, newElement);`.
2. **`innerHTML`**: This method sets the HTML content of an element by replacing its contents, including child elements and text nodes.

**Pros and Cons**

* **`replaceWith`**:
	+ Pros: Can be more efficient when replacing only the inner HTML of an element.
	+ Cons: May not work as expected if the new element has a different structure or attributes than the original element.
* **`innerHTML`**:
	+ Pros: Can simplify code and make it easier to replace elements with different structures or attributes.
	+ Cons: May be slower due to the overhead of parsing and modifying the HTML content.

**Library**

None are explicitly mentioned in this benchmark. However, the `replaceWith` method is part of the DOM API, which is a built-in JavaScript library.

**Special JS feature or syntax**

None are explicitly used in this benchmark. The tests only use standard JavaScript features and APIs.

**Other alternatives**

There may be other approaches to replacing HTML elements, such as:

* **`appendChild` + `removeChild`**: This method appends the new element to the end of the parent node's children list and then removes the original child element.
* **`insertAdjacentHTML`**: This method inserts a string of HTML into an adjacent position in the DOM tree.

However, these alternatives are not being tested in this benchmark.

**Benchmark preparation code**

The script preparation code is empty, which means that MeasureThat.net will generate the necessary JavaScript code to create and manipulate the DOM elements for the test.

**Individual test cases**

Each test case has a unique Benchmark Definition string that represents the JavaScript code used to prepare the test environment. The `Test Name` field specifies whether the test is using `replaceWith` or `innerHTML`.

In summary, this benchmark is testing the performance difference between two approaches for replacing HTML elements: `replaceWith` and `innerHTML`.

replaceWith vs innerHTML (version: 0)

Comparing performance of: `replaceWith vs innerHTML`

Created: 5 years ago by: Guest

Go to the latest result

replaceWith

innerHTML

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 17 runs

Firefox 5 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 innerHTML (version: 0)

Comparing performance of: replaceWith vs innerHTML

Created: 5 years ago by: Guest

Go to the latest result

replaceWith

innerHTML

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 17 runs

Firefox 5 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 innerHTML`