Benchmark: Remove all children from DOM element 2

HTML Preparation code:

<div id='messages'></div>

Script Preparation code:

let list = document.getElementById("messages");
for(i=0; i<10; i++) {
	list.innerHTML += "<span>Text</span>"
}

Tests:

Remove firstChild
let list = document.getElementById("messages"); while (list.firstChild) { list.removeChild(list.firstChild); }
Remove lastChild
let list = document.getElementById("messages"); while (list.lastChild) { list.removeChild(list.lastChild); }
innerHTML
document.getElementById("messages").innerHTML = "";
innerText
document.getElementById("messages").innerText = "";
textContent
document.getElementById("messages").textContent = "";
firstChild.remove
let list = document.getElementById("messages"); while (list.firstChild) { list.firstChild.remove() }
range
var range = new Range(); range.selectNodeContents(document.getElementById("messages")); range.deleteContents();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Remove firstChild
Remove lastChild
innerHTML
innerText
textContent
firstChild.remove
range

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
Remove firstChild	4683363.0 Ops/sec
Remove lastChild	4651363.0 Ops/sec
innerHTML	1979772.1 Ops/sec
innerText	2730578.5 Ops/sec
textContent	1781125.5 Ops/sec
firstChild.remove	4591531.5 Ops/sec
range	968372.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmarks.

**Benchmark Overview**

The tests aim to measure the performance of removing children from a DOM element, specifically using the `innerHTML`, `innerText`, and `textContent` properties. The tests also compare the use of traditional `removeChild()` method with modern alternatives like `firstChild.remove()` and `Range.deleteContents()`.

**Options Compared**

Here's a brief overview of the options being compared:

1. **innerHTML**: This property sets or gets the HTML content of an element.
2. **innerText**: This property sets or gets the text content of an element, excluding HTML tags.
3. **textContent**: This property sets or gets the combined text content and data of an element (including attributes).
4. **removeChild() method**: A traditional way to remove child nodes from a parent node.
5. **firstChild.remove**: A modern alternative to `removeChild()` that targets only the first child node.
6. **Range.deleteContents**: A method for deleting contents of an element, which is used to remove all children.

**Pros and Cons**

Here's a brief summary of the pros and cons of each option:

1. **innerHTML**:
	* Pros: Simple and straightforward, easy to use.
	* Cons: Can be slower due to HTML parsing and DOM manipulation.
2. **innerText**:
	* Pros: Faster than `innerHTML` since it only deals with text content.
	* Cons: May not work as expected if the element contains HTML tags or attributes.
3. **textContent**:
	* Pros: Combines text and data, providing a more comprehensive solution.
	* Cons: Can be slower due to the complexity of parsing combined data.
4. **removeChild() method**:
	* Pros: Fast and efficient for removing individual child nodes.
	* Cons: Requires manual iteration over child nodes, which can be error-prone.
5. **firstChild.remove**:
	* Pros: Targeted towards only the first child node, reducing overhead.
	* Cons: May not work as expected if there are multiple child nodes or if the first child is dynamically created.
6. **Range.deleteContents**:
	* Pros: Efficiently removes all children from an element.
	* Cons: Requires a Range object to be created and can be slower due to additional overhead.

**Library and Special JS Features**

The test cases use the `Range` API, which is a modern way of manipulating DOM content. The `Range` API allows for efficient deletion of text and HTML contents from an element.

No special JavaScript features are explicitly mentioned in the benchmark code, but it's worth noting that some browsers may optimize or have specific behaviors for certain features.

**Alternatives**

If you're looking for alternative ways to remove children from a DOM element, consider using:

1. **QuerySelectorAll()**: Selects all child nodes of an element and can be used to iterate over them.
2. **forEachChild() method**: Iterates over child nodes of an element without requiring manual iteration.

These alternatives may offer different performance characteristics or behaviors compared to the options being tested in the benchmark.

Related benchmarks:

Remove all children from DOM element 2 (version: 2)

Comparing performance of: Remove firstChild vs Remove lastChild vs innerHTML vs innerText vs textContent vs firstChild.remove vs range

Created: one year ago by: Registered User

Jump to the latest result

Remove firstChild

Remove lastChild

innerHTML

innerText

textContent

firstChild.remove

range

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):