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

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: 6 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	18029298.0 Ops/sec
removeChild	62932320.0 Ops/sec
remove	62672400.0 Ops/sec

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

Related benchmarks:

innerhtml vs removechild vs remove! (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove

Created: 5 years ago by: Registered User

Jump to the latest result

innerHTML

removeChild

remove

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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