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 = '';

Historical Performance Data aggregated from 45 community runs

Desktop Results:

Chrome 37 runs

removeChild

22.5M/s

remove

21.6M/s

innerText

7.0M/s

textContent

4.6M/s

innerHTML

4.5M/s

Fastest: removeChild (5.0x faster)

View exact numbers

✓ removeChild: 22,543,872 ops/sec
• remove: 21,611,806 ops/sec
• innerText: 7,015,252 ops/sec
• textContent: 4,587,391 ops/sec
• innerHTML: 4,524,794 ops/sec

Firefox 8 runs

removeChild

6.9M/s

remove

6.8M/s

textContent

5.2M/s

innerHTML

5.0M/s

innerText

4.7M/s

Fastest: removeChild (1.5x faster)

View exact numbers

✓ removeChild: 6,942,942 ops/sec
• remove: 6,801,970 ops/sec
• textContent: 5,212,346 ops/sec
• innerHTML: 4,962,648 ops/sec
• innerText: 4,730,736 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

remove

27.5M/s

removeChild

27.2M/s

innerText

7.6M/s

textContent

4.2M/s

innerHTML

3.8M/s

View exact numbers

Test name	Executions per second
✓ remove	27,528,054 Ops/sec
removeChild	27,196,100 Ops/sec
innerText	7,560,242 Ops/sec
textContent	4,243,005 Ops/sec
innerHTML	3,827,432 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.

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

Go to the latest result

innerHTML

removeChild

remove

innerText

textContent

Historical Performance Data aggregated from 45 community runs

Desktop Results:

Chrome 37 runs

Firefox 8 runs

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

Go to the latest result

innerHTML

removeChild

remove

innerText

textContent

Historical Performance Data aggregated from 45 community runs

Desktop Results:

Chrome 37 runs

Firefox 8 runs

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 remove vs innerText vs textContent`