Benchmark: innerhtml vs removechild vs remove! (few child nodes)

HTML Preparation code:

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

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 3; 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()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
remove

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 139 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
innerHTML	5975850.0 Ops/sec
removeChild	7841600.0 Ops/sec
remove	5914077.0 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 test case compares three different approaches for removing child nodes from an HTML element: `innerHTML`, `removeChild`, and `remove`. The benchmark is designed to measure the performance of these approaches in a scenario where multiple child nodes need to be removed.

**What are we testing?**

We're testing the execution time (in executions per second) of each approach on three different browsers (Chrome 99) and devices (Desktop). The test case consists of:

1. Creating an HTML element with three child nodes using `appendChild`.
2. Removing all child nodes from the element using one of the three approaches: `innerHTML`, `removeChild`, or `remove`.

**Options Compared**

The benchmark compares the performance of three different approaches:

1. **`innerHTML`**: Replacing the entire inner HTML of the element with an empty string.
	* Pros: Simple and efficient, as it only requires a single operation.
	* Cons: May not be suitable for scenarios where multiple child nodes need to be removed, as it clears the entire content.
2. **`removeChild`**: Removing each child node individually using `node.removeChild`.
	* Pros: Suitable for scenarios with multiple child nodes, as it allows individual removal.
	* Cons: Requires more operations (removing each child node) and may be slower due to increased overhead.
3. **`remove`**: Not a standard JavaScript method; the benchmark uses the `remove()` method on `node.firstChild`, which is not a recommended approach.
	* Pros: None; this approach is not standardized and may not work in all browsers or scenarios.
	* Cons: May cause errors or unexpected behavior, as it relies on a non-standard implementation.

**Other Considerations**

The benchmark does not account for the overhead of string manipulation, DOM updates, or other factors that might impact performance. Additionally, the test case only measures the execution time of each approach and does not consider other aspects like memory usage, garbage collection, or browser rendering effects.

**Library Used (if any)**

There is no explicit library used in this benchmark. However, it's worth noting that some browsers may use internal libraries or optimized implementations for DOM manipulation operations.

I hope this explanation helps!

Related benchmarks:

innerhtml vs removechild vs remove! (few child nodes) (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove

Created: 5 years ago by: Guest

Jump to the latest result

innerHTML

removeChild

remove

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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