Benchmark: innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText vs replaceChildren()

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');
for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); node.innerHTML = '';
removeChild
var node = document.getElementById('container'); while(node.firstChild) node.removeChild(node.firstChild)
removeChild backwards
var node = document.getElementById('container'); while(node.lastChild) node.removeChild(node.lastChild)
innerText
var node = document.getElementById('container'); node.innerText = '';
replaceChildren
var node = document.getElementById('container'); node.replaceChildren();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
removeChild backwards
innerText
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 140 on Windows

View result in a separate tab

removeChild

2.2M/s

removeChild backwards

2.2M/s

innerHTML

1.7M/s

innerText

1.4M/s

replaceChildren

810K/s

View exact numbers

Test name	Executions per second
✓ removeChild	2,207,310 Ops/sec
removeChild backwards	2,185,178 Ops/sec
innerHTML	1,680,344 Ops/sec
innerText	1,396,627 Ops/sec
replaceChildren	809,618 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark tests the performance of four different methods for clearing an element's content in JavaScript: `innerHTML`, `removeChild`, `replaceChildren`, and `innerText`. The test cases create 1000 HTML elements inside a container element and then measure how long it takes to clear the content using each method.

**Comparison of Options**

1. **`innerHTML`**: Sets the inner HTML of an element to an empty string, effectively clearing its content.
	* Pros: Simple and easy to implement.
	* Cons: Can be slower than other methods because it involves parsing and manipulating the HTML string.
2. **`removeChild`**: Removes the first child node from an element, then recursively calls `removeChild` on the remaining nodes until there are no more children.
	* Pros: More efficient than `innerHTML` for large datasets, as it avoids parsing and manipulating the HTML string.
	* Cons: Can be slower than other methods if the element has many child nodes to remove.
3. **`replaceChildren`**: Replaces all child nodes of an element with new ones.
	* Pros: More efficient than `removeChild` for large datasets, as it avoids recursive calls and can reuse existing DOM elements.
	* Cons: Can be slower than other methods if the element has many child nodes to replace.
4. **`innerText`**: Sets the text content of an element to an empty string, effectively clearing its content.
	* Pros: Similar to `innerHTML`, but faster because it only updates the text content without parsing and manipulating the HTML string.
	* Cons: Can be slower than other methods if the element has many child nodes or attributes.

**Other Considerations**

* The test uses a Chrome browser on Windows, which may affect the results due to platform-specific optimizations.
* The benchmark measures the number of executions per second, which is a common metric for measuring performance. However, it's essential to note that this measure can be influenced by factors like CPU clock speed, memory usage, and garbage collection.
* The test does not account for other factors that may affect performance, such as DOM mutation, attribute modifications, or event handling.

**Library Usage**

The test uses the `document` object from the DOM (Document Object Model), which is a standard JavaScript library. The `document.getElementById`, `document.createElement`, and `node.removeChild` methods are all part of this library.

**Special JS Features/Syntax**

There are no specific JavaScript features or syntax used in this benchmark. However, some older browsers might have had different implementations or behaviors for these methods, which could affect the results.

In summary, the test provides a useful comparison of four popular methods for clearing an element's content in JavaScript. The results indicate that `replaceChildren` is generally the fastest method for large datasets, followed by `removeChild`, and then `innerHTML`.

innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText vs replaceChildren() (version: 0)

Comparing performance of: `innerHTML vs removeChild vs removeChild backwards vs innerText vs replaceChildren`

Created: 3 years ago by: Guest

Go to the latest result

innerHTML

removeChild

removeChild backwards

innerText

replaceChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText vs replaceChildren() (version: 0)

Comparing performance of: innerHTML vs removeChild vs removeChild backwards vs innerText vs replaceChildren

Created: 3 years ago by: Guest

Go to the latest result

innerHTML

removeChild

removeChild backwards

innerText

replaceChildren

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: `innerHTML vs removeChild vs removeChild backwards vs innerText vs replaceChildren`