Benchmark: Remove all children from DOM element with lastChild

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"); var last; while (last = list.lastChild) list.removeChild(last);
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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

firstChild.remove

36.2M/s

Remove firstChild

36.1M/s

Remove lastChild

36.1M/s

innerHTML

18.9M/s

textContent

18.6M/s

innerText

13.0M/s

range

3.1M/s

View exact numbers

Test name	Executions per second
✓ firstChild.remove	36,180,392 Ops/sec
Remove firstChild	36,137,100 Ops/sec
Remove lastChild	36,104,840 Ops/sec
innerHTML	18,903,592 Ops/sec
textContent	18,562,606 Ops/sec
innerText	12,979,256 Ops/sec
range	3,113,212 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures how long it takes for different browsers to remove all children from a DOM element with the `lastChild` property.

**Benchmark Definition JSON**

The benchmark definition is represented by two parts:

1. **Script Preparation Code**: This code sets up the environment for the benchmark. In this case, it creates an HTML element (`<div id='messages'>`) and appends 1000 child elements to it using a `for` loop.
2. **Html Preparation Code**: This is simply the HTML code that defines the element being measured.

**Individual Test Cases**

There are six test cases:

1. **Remove firstChild**: Removes all child nodes from the DOM element by iterating over the `firstChild` property and removing each node using `removeChild()`.
2. **Remove lastChild**: Removes all child nodes from the DOM element by iterating over the `lastChild` property and removing each node using `removeChild()`.
3. **innerHTML**: Sets the `innerHTML` property of the DOM element to an empty string, effectively removing all child elements.
4. **innerText**: Sets the `innerText` property of the DOM element to an empty string, effectively removing all child elements.
5. **textContent**: Sets the `textContent` property of the DOM element to an empty string, effectively removing all child elements.
6. **firstChild.remove**: Removes all child nodes from the DOM element by using a custom `remove()` method on each node (not a standard JavaScript method).
7. **range**: Uses the `Range` API to select and delete all content from the DOM element.

**Options Compared**

The benchmark compares different ways to remove all child elements from a DOM element:

* Using `firstChild.remove()`: A custom method that removes all child nodes.
* Using `removeChild()` on each node: Iterates over the `lastChild` property and removes each node individually.
* Using `innerHTML` or `innerText`: Sets the text content to an empty string, effectively removing all child elements.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Remove firstChild**: Pros: Simple and efficient. Cons: May not work in older browsers that don't support `firstChild`.
* **Remove lastChild**: Pros: Works on most modern browsers. Cons: Less efficient than using `removeChild()` on each node.
* **innerHTML** or **innerText**: Pros: Fast and works on all browsers. Cons: May cause layout issues if not used carefully.

**Library Used**

None of the test cases use a specific library beyond what's built into JavaScript.

**Special JS Features or Syntax**

The only special feature used in this benchmark is the `Range` API, which is not widely supported yet (as shown by the low execution counts for this test case). The custom `firstChild.remove()` method is also not standard JavaScript syntax.

**Other Alternatives**

Some alternative ways to remove all child elements from a DOM element include:

* Using `element.empty()`: A method that removes all child nodes and sets the element's content to an empty string.
* Using a library like jQuery: Which provides a `$().empty()` method for removing all child elements.

However, MeasureThat.net is focused on measuring the performance of JavaScript code, so it's likely that these alternatives would not be included in the benchmark.

Remove all children from DOM element with lastChild (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

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 with lastChild (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

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`