Benchmark: innerhtml vs removechild vs remove!

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

Historical Performance Data aggregated from 84 community runs

Desktop Results:

Chrome 55 runs

remove

11.6M/s

removeChild

11.5M/s

innerHTML

6.1M/s

Fastest: remove (1.9x faster)

View exact numbers

✓ remove: 11,580,673 ops/sec
• removeChild: 11,494,100 ops/sec
• innerHTML: 6,085,015 ops/sec

Firefox 17 runs

removeChild

6.0M/s

remove

6.0M/s

innerHTML

4.4M/s

Fastest: removeChild (1.4x faster)

View exact numbers

✓ removeChild: 6,035,681 ops/sec
• remove: 5,964,828 ops/sec
• innerHTML: 4,445,558 ops/sec

Safari 7 runs

removeChild

14.6M/s

remove

14.6M/s

innerHTML

12.0M/s

Fastest: removeChild (1.2x faster)

View exact numbers

✓ removeChild: 14,633,698 ops/sec
• remove: 14,551,453 ops/sec
• innerHTML: 11,954,938 ops/sec

Mobile Results:

Chrome 5 runs

removeChild

2.9M/s

remove

2.9M/s

innerHTML

2.4M/s

Fastest: removeChild (1.2x faster)

View exact numbers

✓ removeChild: 2,933,910 ops/sec
• remove: 2,927,319 ops/sec
• innerHTML: 2,422,554 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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

remove

28.4M/s

removeChild

28.4M/s

innerHTML

6.3M/s

View exact numbers

Test name	Executions per second
✓ remove	28,437,746 Ops/sec
removeChild	28,427,054 Ops/sec
innerHTML	6,258,677 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON benchmark represents a comparison of three different approaches to remove content from an HTML element:

1. `removeChild`: Removing the child node from the DOM using the `removeChild` method.
2. `remove`: Using the `remove` method on the child node itself (not applicable in modern JavaScript, as it's deprecated and removed).
3. `innerHTML`: Setting the innerHTML of the element to an empty string.

**Options comparison**

The three options are compared in terms of performance, which is measured by the number of executions per second.

**Pros and Cons**

1. **removeChild**:
	* Pros: Efficient way to remove child nodes, works well for large datasets.
	* Cons: Can be slower than `innerHTML` if the element has many child nodes (because it needs to traverse the DOM).
2. **remove**: Not applicable in modern JavaScript due to deprecation and removal. However, if we were considering a hypothetical scenario where this method is still used:
	* Pros: Simple to implement.
	* Cons: Inefficient and potentially slow due to unnecessary DOM manipulations.
3. **innerHTML**:
	* Pros: Fast and efficient way to remove content from an element, especially for large datasets (because it doesn't require traversing the DOM).
	* Cons: Can be slower than `removeChild` if the element has many child nodes that need to be removed individually.

**Library and purpose**

The `document.getElementById` function is used in all benchmark definitions, which is part of the JavaScript DOM API. This function retrieves a single HTML element by its ID.

There are no other libraries or frameworks being used in this benchmark.

**Special JS feature or syntax**

None of the benchmark tests use any special JavaScript features or syntax beyond what's necessary for the given task (DOM manipulation).

**Alternatives**

Other alternatives to these approaches include:

* Using a library like jQuery or another DOM manipulation library, which may provide additional benefits (e.g., caching, optimization).
* Implementing custom DOM removal logic using other methods, such as using `requestAnimationFrame` or Web Workers.
* Considering alternative data structures, like arrays or sets, for storing and manipulating data.

In this specific benchmark, the focus is on comparing the performance of these three approaches within the context of modern JavaScript and the DOM API.

innerhtml vs removechild vs remove! (version: 0)

Comparing performance of: `innerHTML vs removeChild vs remove`

Created: 6 years ago by: Registered User

Go to the latest result

innerHTML

removeChild

remove

Historical Performance Data aggregated from 84 community runs

Desktop Results:

Chrome 55 runs

Firefox 17 runs

Safari 7 runs

Mobile Results:

Chrome 5 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! (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove

Created: 6 years ago by: Registered User

Go to the latest result

innerHTML

removeChild

remove

Historical Performance Data aggregated from 84 community runs

Desktop Results:

Chrome 55 runs

Firefox 17 runs

Safari 7 runs

Mobile Results:

Chrome 5 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`