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();

Historical Performance Data aggregated from 104 community runs

Desktop Results:

Chrome 76 runs

remove

10.1M/s

removeChild

10.0M/s

innerHTML

5.2M/s

replaceChildren

4.5M/s

Fastest: remove (2.2x faster)

View exact numbers

✓ remove: 10,063,312 ops/sec
• removeChild: 10,010,796 ops/sec
• innerHTML: 5,246,462 ops/sec
• replaceChildren: 4,481,030 ops/sec

Firefox 23 runs

remove

6.0M/s

removeChild

5.9M/s

innerHTML

4.2M/s

replaceChildren

2.3M/s

Fastest: remove (2.6x faster)

View exact numbers

✓ remove: 5,956,802 ops/sec
• removeChild: 5,882,308 ops/sec
• innerHTML: 4,194,940 ops/sec
• replaceChildren: 2,271,357 ops/sec

Safari 5 runs

removeChild

61.0M/s

remove

60.8M/s

innerHTML

12.7M/s

replaceChildren

9.2M/s

Fastest: removeChild (6.6x faster)

View exact numbers

✓ removeChild: 61,023,216 ops/sec
• remove: 60,763,432 ops/sec
• innerHTML: 12,726,486 ops/sec
• replaceChildren: 9,187,555 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
removeChild
remove
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

removeChild

57.5M/s

remove

57.4M/s

innerHTML

9.7M/s

replaceChildren

8.7M/s

View exact numbers

Test name	Executions per second
✓ removeChild	57,456,820 Ops/sec
remove	57,410,424 Ops/sec
innerHTML	9,674,707 Ops/sec
replaceChildren	8,692,468 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 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.

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: 3 years ago by: Guest

Go to the latest result

innerHTML

removeChild

remove

replaceChildren

Historical Performance Data aggregated from 104 community runs

Desktop Results:

Chrome 76 runs

Firefox 23 runs

Safari 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 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: 3 years ago by: Guest

Go to the latest result

innerHTML

removeChild

remove

replaceChildren

Historical Performance Data aggregated from 104 community runs

Desktop Results:

Chrome 76 runs

Firefox 23 runs

Safari 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 removeChild vs remove vs replaceChildren`