Benchmark: innerhtml vs removechild vs remove vs replaceChildren

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); node.innerHTML = '';
removeChild
var node = document.getElementById('container'); while(node.firstChild) node.removeChild(node.firstChild)
remove
var node = document.getElementById('container'); while(node.firstChild) node.firstChild.remove()
replaceChildren
var node = document.getElementById('container'); node.replaceChildren();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
remove
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	3563584.2 Ops/sec
removeChild	4465453.5 Ops/sec
remove	4453668.5 Ops/sec
replaceChildren	2190554.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares four different approaches to clearing or modifying the contents of an HTML element:

1. `innerHTML`
2. `removeChild`
3. `remove`
4. `replaceChildren`

**Options Comparison**

Here's a brief overview of each option:

* `innerHTML`: This method sets the content of an element by assigning a string value to its `innerHTML` property. It's often used for simple text updates.
	+ Pros: Easy to use, fast
	+ Cons: Can lead to security issues if not sanitized, can be slower than other methods due to DOM manipulation
* `removeChild`: This method removes the first child element of a node and returns it. The removed element is then discarded.
	+ Pros: Efficient way to remove children, doesn't require creating a new string
	+ Cons: Requires multiple loops to clear the entire content, can be slower than other methods due to repeated DOM manipulation
* `remove`: This method is not a standard DOM method, but rather a custom function that removes an element by setting its `display` property to `none`.
	+ Pros: Simple implementation, fast
	+ Cons: Not a standard method, may cause layout issues if used incorrectly
* `replaceChildren`: This method replaces the child nodes of a node with new ones.
	+ Pros: Efficient way to replace children, doesn't require creating a new string
	+ Cons: Can be slower than other methods due to repeated DOM manipulation

**Library Usage**

There is no specific library being used in this benchmark. However, it's worth noting that some browsers may have internal optimizations or custom implementations for certain DOM methods.

**Special JS Features**

None of the options mentioned above use any special JavaScript features like async/await, promises, or generator functions. They are all synchronous and straightforward.

**Other Alternatives**

If you're looking for alternative approaches to clearing an element's content, some other options include:

* Using a library like jQuery's `empty()` method
* Creating a new string using template literals or `String.prototype.repeat()`
* Using a custom implementation with CSS transformations (e.g., changing the `display` property)

Keep in mind that each approach has its pros and cons, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

innerhtml vs removechild vs remove vs replaceChildren (version: 0)

innerhtml vs removechild vs remove vs replaceChildren

Comparing performance of: innerHTML vs removeChild vs remove vs replaceChildren

Created: 2 years ago by: Guest

Jump to the latest result

innerHTML

removeChild

remove

replaceChildren

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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