Benchmark: innerHTML vs replaceChildren

HTML Preparation code:

<table>
  <tr>
    <td id="title">Title</td>
    <td id="url">URL</td>
  </tr>
</table>

Script Preparation code:

const title = document.getElementById('title');
const url = document.getElementById('url');

Tests:

innerHTML
title.innerHTML = "Edited Title"; url.innerHTML = "Edited URL";
replaceChildren
title.replaceChildren("Edited Title"); url.replaceChildren("Edited URL");

Historical Performance Data aggregated from 115 community runs

Desktop Results:

Chrome 64 runs

replaceChildren

572K/s

innerHTML

120K/s

Fastest: replaceChildren (4.8x faster)

View exact numbers

✓ replaceChildren: 572,166 ops/sec
• innerHTML: 120,264 ops/sec

Firefox 37 runs

replaceChildren

218K/s

innerHTML

181K/s

Fastest: replaceChildren (1.2x faster)

View exact numbers

✓ replaceChildren: 218,098 ops/sec
• innerHTML: 180,844 ops/sec

Safari 9 runs

replaceChildren

2.0M/s

innerHTML

973K/s

Fastest: replaceChildren (2.0x faster)

View exact numbers

✓ replaceChildren: 1,957,837 ops/sec
• innerHTML: 972,524 ops/sec

Mobile Results:

Chrome 5 runs

replaceChildren

266K/s

innerHTML

26K/s

Fastest: replaceChildren (10.3x faster)

View exact numbers

✓ replaceChildren: 265,637 ops/sec
• innerHTML: 25,867 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
innerHTML
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 142 on Mac OS X 10.10

View result in a separate tab

replaceChildren

386K/s

innerHTML

236K/s

View exact numbers

Test name	Executions per second
✓ replaceChildren	386,344 Ops/sec
innerHTML	235,534 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark tests the performance difference between two approaches: `innerHTML` and `replaceChildren`. These methods are used to update the content of HTML elements.

**Options Compared**

Two options are compared in this benchmark:

1. **innerHTML**: This method sets the inner HTML of an element, which includes both the text content and the HTML structure.
2. **replaceChildren**: This method replaces the child nodes of an element with new ones, effectively updating the content without preserving the original HTML structure.

**Pros and Cons**

Here are some pros and cons of each approach:

* **innerHTML**:
	+ Pros: Easy to use and widely supported.
	+ Cons: Can lead to slower performance due to the additional overhead of parsing and manipulating the HTML structure. It also requires more memory, as it needs to store the entire HTML structure.
* **replaceChildren**:
	+ Pros: Generally faster than `innerHTML`, as it only updates the child nodes without preserving the original HTML structure. This approach can also reduce memory usage, as it doesn't need to store the entire HTML structure.
	+ Cons: Requires more manual effort to set up and tear down, as you need to create new child nodes or update existing ones.

**Library and Special JavaScript Features**

There are no libraries mentioned in this benchmark, but some browsers might use libraries like Web Workers or native web APIs (e.g., `webassembly`) for performance-critical code. However, these are not relevant to the specific comparison between `innerHTML` and `replaceChildren`.

**Other Considerations**

When choosing between `innerHTML` and `replaceChildren`, consider the following:

* If you need to update the content of an element frequently, `replaceChildren` might be a better choice.
* If you're working with complex HTML structures or need to preserve certain HTML elements, `innerHTML` might be more suitable.
* Always consider the specific use case and performance requirements of your application.

**Alternatives**

Other alternatives for updating HTML content include:

1. **setText()**: This method sets the text content of an element without preserving the original HTML structure.
2. **innerHTML vs innerHTML (without parsing)**: Some modern browsers support a variant of `innerHTML` that bypasses parsing and directly updates the DOM. However, this is not widely supported and might not be compatible with older browsers.

In summary, MeasureThat.net's benchmark provides a simple yet informative comparison between two approaches for updating HTML content in JavaScript. By understanding the pros and cons of each method, developers can make informed decisions about which approach to use depending on their specific needs and performance requirements.

innerHTML vs replaceChildren (version: 0)

Comparing performance of: `innerHTML vs replaceChildren`

Created: 3 years ago by: Guest

Go to the latest result

innerHTML

replaceChildren

Historical Performance Data aggregated from 115 community runs

Desktop Results:

Chrome 64 runs

Firefox 37 runs

Safari 9 runs

Mobile Results:

Chrome 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):

innerHTML vs replaceChildren (version: 0)

Comparing performance of: innerHTML vs replaceChildren

Created: 3 years ago by: Guest

Go to the latest result

innerHTML

replaceChildren

Historical Performance Data aggregated from 115 community runs

Desktop Results:

Chrome 64 runs

Firefox 37 runs

Safari 9 runs

Mobile Results:

Chrome 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: `innerHTML vs replaceChildren`