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

Historical Performance Data aggregated from 46 community runs

Desktop Results:

Chrome 30 runs

firstChild.remove

16.1M/s

Remove lastChild

16.0M/s

Remove firstChild

15.8M/s

innerHTML

7.6M/s

innerText

7.3M/s

textContent

6.9M/s

range

2.1M/s

Fastest: firstChild.remove (7.5x faster)

View exact numbers

✓ firstChild.remove: 16,097,530 ops/sec
• Remove lastChild: 15,965,818 ops/sec
• Remove firstChild: 15,821,484 ops/sec
• innerHTML: 7,571,229 ops/sec
• innerText: 7,328,925 ops/sec
• textContent: 6,850,505 ops/sec
• range: 2,141,762 ops/sec

Firefox 16 runs

firstChild.remove

5.4M/s

Remove firstChild

5.3M/s

Remove lastChild

5.3M/s

textContent

4.2M/s

innerHTML

3.8M/s

innerText

3.8M/s

range

1.5M/s

Fastest: firstChild.remove (3.6x faster)

View exact numbers

✓ firstChild.remove: 5,366,172 ops/sec
• Remove firstChild: 5,280,378 ops/sec
• Remove lastChild: 5,269,151 ops/sec
• textContent: 4,249,256 ops/sec
• innerHTML: 3,838,541 ops/sec
• innerText: 3,787,302 ops/sec
• range: 1,488,472 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months ago)

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

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

firstChild.remove

45.5M/s

Remove lastChild

45.2M/s

Remove firstChild

45.1M/s

innerText

17.2M/s

textContent

9.2M/s

innerHTML

8.7M/s

range

5.0M/s

View exact numbers

Test name	Executions per second
✓ firstChild.remove	45,451,428 Ops/sec
Remove lastChild	45,172,348 Ops/sec
Remove firstChild	45,105,476 Ops/sec
innerText	17,209,156 Ops/sec
textContent	9,193,548 Ops/sec
innerHTML	8,677,073 Ops/sec
range	4,956,853 Ops/sec

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

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: 5 years ago by: Registered User

Go to the latest result

Remove firstChild

Remove lastChild

innerHTML

innerText

textContent

firstChild.remove

range

Historical Performance Data aggregated from 46 community runs

Desktop Results:

Chrome 30 runs

Firefox 16 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 5 years ago by: Registered User

Go to the latest result

Remove firstChild

Remove lastChild

innerHTML

innerText

textContent

firstChild.remove

range

Historical Performance Data aggregated from 46 community runs

Desktop Results:

Chrome 30 runs

Firefox 16 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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