Benchmark: textContent 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:

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

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 14 runs

textContent

2.5M/s

replaceChildren

341K/s

Fastest: textContent (7.3x faster)

View exact numbers

✓ textContent: 2,504,107 ops/sec
• replaceChildren: 340,986 ops/sec

Firefox 5 runs

textContent

247K/s

replaceChildren

238K/s

View exact numbers

✓ textContent: 247,218 ops/sec
• replaceChildren: 238,431 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
textContent
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 148 on Windows

View result in a separate tab

textContent

457K/s

replaceChildren

436K/s

View exact numbers

Test name	Executions per second
✓ textContent	457,046 Ops/sec
replaceChildren	435,885 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches: setting the `textContent` property of an HTML element versus using the `replaceChildren` method to replace its children.

**Options being compared**

Two options are compared:

1. **textContent**: This approach sets the text content of the element's innerHTML without modifying the element's structure.
2. **replaceChildren**: This approach replaces the entire child content of the element with a new set of nodes.

**Pros and Cons of each approach**

* **textContent**:
	+ Pros: Efficient, as it only updates the element's text content without affecting its structure or layout.
	+ Cons: Can lead to slow performance if the element has many children or large text content.
* **replaceChildren**:
	+ Pros: Can be faster for elements with complex structures or large amounts of data, as it replaces the entire child content at once.
	+ Cons: Can be slower than `textContent` due to the overhead of creating and appending new nodes.

**Library usage**

The benchmark uses none, as both approaches are built-in methods of the DOM API.

**Special JS features/syntax**

Neither approach uses any special JavaScript features or syntax. The test cases only involve basic DOM manipulation.

**Other alternatives**

If you were to modify this benchmark, you might consider adding other approaches, such as:

* **innerHTML**: Similar to `textContent`, but with the added overhead of parsing HTML strings.
* **slice() + appendChild()**: Replaces the element's child nodes by creating a new array and appending it to the element using `appendChild()`.

By comparing these alternative approaches, you could gain a better understanding of their performance characteristics and optimize your code for specific use cases.

In conclusion, this benchmark provides a simple yet informative comparison between two common DOM manipulation approaches. By analyzing the results and considering alternative methods, developers can make informed decisions about which approach to use in their own projects.

textContent vs replaceChildren (version: 1)

Comparing performance of: `textContent vs replaceChildren`

Created: 3 years ago by: Registered User

Go to the latest result

textContent

replaceChildren

Historical Performance Data aggregated from 19 community runs

Desktop Results:

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

textContent vs replaceChildren (version: 1)

Comparing performance of: textContent vs replaceChildren

Created: 3 years ago by: Registered User

Go to the latest result

textContent

replaceChildren

Historical Performance Data aggregated from 19 community runs

Desktop Results:

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