Benchmark: Remove all children from DOM element

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();

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

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

LLMs can make mistakes. Check important info.

Measuring performance of JavaScript microbenchmarks is essential to identify optimization opportunities and ensure robustness across different browsers and devices.

**Benchmark Definition**

The provided JSON represents the benchmark, which tests the removal of children from an HTML element with the ID "messages". The script preparation code generates a DOM element with 1000 child elements (span elements) using a for loop. The html preparation code defines the initial HTML structure.

**Options Compared**

Three approaches are compared:

1. **while loop**: Removes the first child node using `list.firstChild.remove()` in a while loop until there are no more child nodes.
2. **removeChild() method**: Directly removes the first child node using `list.removeChild(list.firstChild)`.
3. **innerHTML property**: Sets the inner HTML of the element to an empty string (`""`).
4. **innerText property**: Sets the inner text of the element to an empty string (`""`).
5. **textContent property**: Sets the text content of the element to an empty string (`""`).
6. **Range API**: Uses the Range API to select and delete all contents within the element.

**Pros and Cons**

1. **while loop (Remove firstChild)**:
	* Pros: Efficient in terms of performance, as it only removes one child node at a time.
	* Cons: May lead to slow performance if the element has many child nodes, due to repeated removals.
2. **removeChild() method (Remove lastChild)**:
	* Pros: Fast and efficient, as it directly removes the last child node without unnecessary iterations.
	* Cons: May cause slower performance if used with a large number of child nodes, since DOM trees are rebuilt after each removal.
3. **innerHTML property**:
	* Pros: Simple and straightforward, as it sets the entire HTML content to an empty string.
	* Cons: May lead to slower performance, as it requires parsing and updating the entire HTML content.
4. **innerText property**:
	* Pros: Similar to `innerHTML` in simplicity, but with a more specific purpose (only text content).
	* Cons: May have similar performance implications as `innerHTML`.
5. **textContent property**:
	* Pros: Similar to `innerText`, with the added benefit of being more precise and efficient in terms of text content manipulation.
	* Cons: May have similar performance implications as `innerHTML` or `innerText`.
6. **Range API (range)**:
	* Pros: Efficient and fast, as it uses optimized algorithms for range operations.
	* Cons: May be less intuitive and require additional setup and understanding of the Range API.

**Special JS Feature/Syntax**

None are explicitly mentioned in the provided benchmark definition or test cases. However, using `let` declarations (e.g., `let list = document.getElementById("messages");`) is a common practice in modern JavaScript development.

**Other Alternatives**

Some alternative approaches to measure removal performance could include:

* Using other data structures, such as arrays or vectors, instead of DOM elements.
* Manipulating the DOM using other methods, like fragment-based updates.
* Utilizing Web Workers or parallel processing for concurrent execution.
* Measuring performance in different browsers or devices.

Please note that this analysis is based on a single benchmark definition and test cases. A more comprehensive evaluation would require considering multiple factors, such as code optimization techniques, caching strategies, and memory management.

Latest run results:

Run details: (Test run date: yesterday)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Windows

View result in a separate tab

Test name	Executions per second
Remove firstChild	4366030.5 Ops/sec
Remove lastChild	4399025.0 Ops/sec
innerHTML	3327987.8 Ops/sec
innerText	3028392.5 Ops/sec
textContent	3355029.5 Ops/sec
firstChild.remove	4330508.5 Ops/sec
range	1141219.4 Ops/sec

Related benchmarks:

Remove all children from DOM element (version: 0)

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

Created: 4 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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