Benchmark: innerhtml vs removechild vs remove vs innerText vs textContent

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)
remove
var node = document.getElementById('container'); while(node.firstChild) node.firstChild.remove()
innerText
var node = document.getElementById('container'); node.innerText = '';
textContent
var node = document.getElementById('container'); node.textContent = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
remove
innerText
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

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

Browser/OS: Chrome 149 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	12719794.0 Ops/sec
removeChild	56654424.0 Ops/sec
remove	56327452.0 Ops/sec
innerText	23575798.0 Ops/sec
textContent	11198448.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark is designed to compare the performance of different approaches for removing or setting the inner content, text content, or child nodes of an HTML element in JavaScript.

**Test Cases**

There are six test cases:

1. `innerHTML`: Sets the inner HTML of an element.
2. `removeChild`: Removes all child nodes from an element using a while loop.
3. `remove`: Removes a single child node from an element using a while loop.
4. `innerText`: Sets the text content of an element.
5. `textContent`: Sets the text content of an element.

**Comparison of Approaches**

Here's a comparison of the different approaches:

* **innerHTML**: This approach sets the entire HTML content of the element, including any child nodes or attributes. It can be slow because it involves parsing and replacing the entire HTML document.
* **removeChild**: This approach removes all child nodes from an element by iterating through each child node and calling `remove()` on it. While this is faster than `innerHTML`, it still requires iteration and can be slower for large datasets.
* **remove**: Similar to `removeChild`, but only removes a single child node instead of all of them.
* **innerText**: This approach sets the text content of an element without replacing any HTML tags or attributes, making it faster than `innerHTML`. However, it may not work correctly if the text content contains Unicode characters that require multiple code units to represent.
* **textContent**: Similar to `innerText`, but takes into account Unicode characters and can handle more complex scenarios.

**Pros and Cons**

Here are some pros and cons of each approach:

* **innerHTML**:
	+ Pros: Simple to implement, works well for small datasets.
	+ Cons: Slow, can be vulnerable to XSS attacks if not properly sanitized.
* **removeChild**:
	+ Pros: Faster than `innerHTML`, can handle large datasets.
	+ Cons: Requires iteration over child nodes, may be slower than `innerText` or `textContent`.
* **remove**:
	+ Pros: Similar performance to `removeChild`, but only removes a single node.
	+ Cons: Only removes one child node, may not be suitable for all use cases.
* **innerText**:
	+ Pros: Faster than `innerHTML`, works well for text content scenarios.
	+ Cons: May not work correctly with Unicode characters or HTML tags.
* **textContent**:
	+ Pros: Similar performance to `innerText`, handles Unicode characters and HTML tags better.
	+ Cons: Can be slower than `removeChild` due to the additional processing required.

**Library and Special JS Features**

No libraries are used in this benchmark. However, some special JavaScript features, such as support for Unicode characters (e.g., `String.fromCodePoint()`), may affect the performance of certain approaches.

**Alternatives**

Other alternatives that could be tested in a similar benchmark include:

* Using `DOMParser` to parse and set HTML content.
* Using `DocumentFragment` to create a temporary container and move nodes around.
* Using `requestAnimationFrame` or other optimization techniques to improve performance.
* Using different JavaScript engines (e.g., SpiderMonkey, V8) to compare performance differences.

These alternatives could provide additional insights into the trade-offs between different approaches and help identify the most efficient way to perform common DOM manipulation tasks.

Related benchmarks:

innerhtml vs removechild vs remove vs innerText vs textContent (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove vs innerText vs textContent

Created: 5 years ago by: Guest

Jump to the latest result

innerHTML

removeChild

remove

innerText

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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