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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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: 3 years 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>

Fastest: N/A

Slowest: N/A

No previous run results

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