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 month 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

Test name	Executions per second
Remove firstChild	36137100.0 Ops/sec
Remove lastChild	36104840.0 Ops/sec
innerHTML	18903592.0 Ops/sec
innerText	12979256.0 Ops/sec
textContent	18562606.0 Ops/sec
firstChild.remove	36180392.0 Ops/sec
range	3113211.5 Ops/sec

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

Related benchmarks:

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