Benchmark: innerHTML vss replaceChildren

HTML Preparation code:

<div data-test-id='beans'></div>

Tests:

innerHTML
const els = document.querySelectorAll('[data-test-id]') els.forEach((el) => el.innerHTML = '')
replaceChildren
const els = document.querySelectorAll('[data-test-id]') els.forEach((el) => el.replaceChildren())

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	1405555.5 Ops/sec
replaceChildren	1455567.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain what's being tested in the provided benchmark.

**Benchmark Test:**

The benchmark is designed to compare two approaches for clearing the content of HTML elements within a specific container using JavaScript:

1. `innerHTML`: This approach sets the innerHTML of each element to an empty string (`''`).
2. `replaceChildren`: This approach uses the `replaceChildren()` method to replace the child nodes of each element with new ones, effectively clearing their content.

**Comparison:**

The benchmark aims to determine which approach is faster and more efficient between setting `innerHTML` or using `replaceChildren`. The test measures the number of executions per second (ExecutionsPerSecond) for both approaches on a desktop platform running Chrome 128.

**Pros and Cons:**

* **`innerHTML`**:
	+ Pros:
		- Simple and widely supported by most browsers.
		- Easy to implement.
	+ Cons:
		- Can be slower due to the need to parse and replace the HTML content, which can lead to additional DOM manipulations.
		- May have performance implications for large datasets or complex layouts.
* **`replaceChildren`**:
	+ Pros:
		- Typically faster than `innerHTML`, as it only replaces child nodes without parsing new content.
		- Can be more efficient for larger datasets, as it doesn't require HTML parsing.
	+ Cons:
		- Less widely supported by older browsers or those with DOM quirks.
		- Requires careful handling of node removal and creation.

**Library Usage:**

There is no explicit library mentioned in the provided code snippet. However, if you're using a library like jQuery, which often includes methods to manipulate elements (e.g., `html()`), it might be worth noting that these libraries can also provide an overhead for certain operations.

**Special JS Feature/Syntax:**

The benchmark doesn't use any special JavaScript features or syntax beyond what's standard in modern browsers. The focus is on the approach and comparison between `innerHTML` and `replaceChildren`.

**Other Alternatives:**

If you're looking for alternative approaches to clear HTML content, some other options include:

* Using a library like jQuery (`$element.empty()` or `$element.clear()`)
* Utilizing CSS only by setting the `display` property to `none` or using `visibility: hidden`
* Leveraging web workers or parallel processing to optimize performance
* Employing micro-optimizations, such as using `innerHTML` with a smaller HTML string

Keep in mind that these alternatives might come with trade-offs in terms of compatibility, complexity, or overhead.

Related benchmarks:

innerHTML vss replaceChildren (version: 0)

Comparing performance of: innerHTML vs replaceChildren

Created: one year ago by: Guest

Jump to the latest result

innerHTML

replaceChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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