Benchmark: Remove all children from DOM element 30

HTML Preparation code:

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

Script Preparation code:

let list = document.getElementById("messages");
for(i=0; i<1000; 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.firstChild) { list.removeChild(list.firstChild); }
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();
replaceChildren
let list = document.getElementById("messages"); list.replaceChildren()

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
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Remove firstChild	10291701.0 Ops/sec
Remove lastChild	10280178.0 Ops/sec
innerHTML	8593443.0 Ops/sec
innerText	7444265.0 Ops/sec
textContent	8397485.0 Ops/sec
firstChild.remove	10332918.0 Ops/sec
range	2685014.0 Ops/sec
replaceChildren	7788756.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark measures the performance of removing all children from a DOM element with the ID "messages". The script preparation code is used to populate the element with 1000 HTML spans, and then the benchmark starts. The HTML preparation code creates an empty `<div>` element with the specified ID.

**Test Cases**

There are six test cases:

1. **Remove firstChild**: This test case removes the first child element from the "messages" div using a `while` loop.
2. **Remove lastChild**: Similar to the previous one, but it removes the last child element instead of the first one.
3. **innerHTML**: This test case clears the inner HTML content of the "messages" div by setting its `innerHTML` property to an empty string.
4. **innerText**: Similar to the previous one, but it uses the `innerText` property instead of `innerHTML`.
5. **textContent**: This test case sets the text content of the "messages" div to an empty string.
6. **firstChild.remove**: This test case removes the first child element using a method call on the `firstChild` property (not available in older browsers).
7. **range**: This test case uses the Web Range API to select and delete all contents of the "messages" div.

**Options Compared**

The benchmark is comparing different approaches for removing children from an HTML element:

* **Remove firstChild** vs. **Remove lastChild**: These two tests compare the performance of removing the first child versus the last child.
* **innerHTML**, **innerText**, and **textContent**: These three tests compare the performance of clearing the inner content using different properties.
* **firstChild.remove**: This test uses a method call on the `firstChild` property, which may not be supported in older browsers. However, it's likely that this is included to ensure compatibility with newer browsers.
* **range**: This test uses the Web Range API, which provides a more modern and efficient way of selecting and manipulating HTML elements.

**Pros and Cons**

Here are some pros and cons for each approach:

* **Remove firstChild** vs. **Remove lastChild**:
	+ Pros: Both methods are relatively lightweight and widely supported.
	+ Cons: The performance difference between the two may be negligible, depending on the specific use case.
* **innerHTML**, **innerText**, and **textContent**:
	+ Pros: These properties are widely supported and provide a simple way to clear inner content.
	+ Cons: These methods can be slower than using `removeChild()` or the Web Range API, especially for larger amounts of data.
* **firstChild.remove**: This method is not as efficient as using `removeChild()`, but it may be necessary for older browsers that don't support this property.
* **range**:
	+ Pros: The Web Range API provides a more modern and efficient way of selecting and manipulating HTML elements.
	+ Cons: This API is relatively new, so support may not be widespread.

**Browser Considerations**

The benchmark results are likely to be influenced by the specific browser being used. Some browsers may have better performance or compatibility with certain methods than others. For example:

* Older browsers like Internet Explorer 11 might require using `firstChild.remove` or other compatibility fixes.
* Modern browsers like Chrome and Firefox might prioritize the Web Range API for its efficiency and modernity.

**Conclusion**

The benchmark provides a good starting point for understanding the performance differences between various methods for removing children from an HTML element. However, it's essential to consider browser compatibility and use the most efficient method available for each specific use case.

Related benchmarks:

Remove all children from DOM element 30 (version: 0)

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

Created: 9 months ago by: Guest

Jump to the latest result

Remove firstChild

Remove lastChild

innerHTML

innerText

textContent

firstChild.remove

range

replaceChildren

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