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: one month ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	8258531.0 Ops/sec
removeChild	9872132.0 Ops/sec
removeChild backwards	9865008.0 Ops/sec
innerText	7276891.0 Ops/sec
replaceChildren	7698579.0 Ops/sec

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

Related benchmarks:

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: one year ago by: Guest

Jump to the latest result

innerHTML

removeChild

removeChild backwards

innerText

replaceChildren

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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