Benchmark: Removal of DOM Element's Children (removeChild vs remove vs innerHTML vs textContent)

HTML Preparation code:

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

Script Preparation code:

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

Tests:

innerHTML
let node = document.getElementById('container'); node.innerHTML = '';
textContent
let node = document.getElementById('container'); node.textContent = '';
removeChild (firstChild)
let node = document.getElementById('container'); while (node.firstChild) node.removeChild(node.firstChild);
removeChild (lastChild)
let node = document.getElementById('container'); while (node.lastChild) node.removeChild(node.lastChild);
remove (firstChild)
let node = document.getElementById('container'); while (node.firstChild) node.firstChild.remove();
remove (lastChild)
let node = document.getElementById('container'); while (node.lastChild) node.lastChild.remove();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
textContent
removeChild (firstChild)
removeChild (lastChild)
remove (firstChild)
remove (lastChild)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different methods for removing children elements from a DOM node in JavaScript. The goal is to determine which method is the fastest and most efficient.

**Methods Compared**

The benchmark compares six methods:

1. `removeChild`: Removing a child element by calling `removeChild` on the first child node.
2. `removeChild (lastChild)`: Removing the last child element by calling `removeChild` on the last child node.
3. `remove (firstChild)`: Removing the first child element by calling `remove` on the first child node. Note: The `remove` method is not a standard DOM method, but rather a proprietary method provided by some JavaScript engines or libraries. In this benchmark, it's used to compare with `removeChild`.
4. `remove (lastChild)`: Removing the last child element by calling `remove` on the last child node. Note: The `remove` method is not a standard DOM method.
5. `innerHTML`: Setting the inner HTML of the node to an empty string.
6. `textContent`: Setting the text content of the node to an empty string.

**Pros and Cons of Each Method**

* `removeChild`:
	+ Pros: Standard DOM method, easy to implement.
	+ Cons: May cause unnecessary reflows or repaints if not handled carefully.
* `removeChild (lastChild)`:
	+ Pros: Efficient way to remove the last child element.
	+ Cons: Requires knowing the length of the child list to access the last child node.
* `remove (firstChild)` and `remove (lastChild)`:
	+ Pros: Can be faster than `removeChild` for large lists, as it only requires accessing one child node.
	+ Cons: Not standard DOM methods, may not work in all browsers or contexts. The proprietary `remove` method used here is specific to some JavaScript engines or libraries.
* `innerHTML`:
	+ Pros: Easy to implement and works in most browsers.
	+ Cons: May cause unnecessary reflows or repaints if the HTML content changes frequently.
* `textContent`:
	+ Pros: Works in most browsers and can be faster than `innerHTML`.
	+ Cons: May not work as expected with non-text child elements.

**Library Usage**

None of the methods use a specific library, but some may rely on proprietary features or APIs provided by JavaScript engines or libraries. The benchmark is focused on measuring the performance of standard DOM methods and JavaScript engine-specific optimizations.

**Special JS Features or Syntax**

None mentioned in the benchmark definition.

**Other Alternatives**

* Using `outerHTML` instead of `innerHTML` might be an alternative for setting the outer HTML of an element.
* Using a library like jQuery's `.empty()` method or the `DOMPurify` library to remove elements could also be considered, but these would likely have different performance characteristics.

Keep in mind that this benchmark is focused on measuring the performance of specific methods and may not cover all possible scenarios or edge cases.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Browser/OS: Chrome 93 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	4372184.0 Ops/sec
textContent	3849479.2 Ops/sec
removeChild (firstChild)	5812119.5 Ops/sec
removeChild (lastChild)	5804937.0 Ops/sec
remove (firstChild)	5725400.5 Ops/sec
remove (lastChild)	5761932.5 Ops/sec

Related benchmarks:

Removal of DOM Element's Children (removeChild vs remove vs innerHTML vs textContent) (version: 0)

Test the various methods of removing all children elements from a parent

Comparing performance of: innerHTML vs textContent vs removeChild (firstChild) vs removeChild (lastChild) vs remove (firstChild) vs remove (lastChild)

Created: 3 years ago by: Guest

Jump to the latest result

innerHTML

textContent

removeChild (firstChild)

removeChild (lastChild)

remove (firstChild)

remove (lastChild)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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