Benchmark: textContent 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:

textContent
var node = document.getElementById('container'); node.textContent = '';
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 8 community runs

Desktop Results:

Chrome 8 runs

removeChild

9.1M/s

remove

9.0M/s

textContent

2.9M/s

Fastest: removeChild (3.1x faster)

View exact numbers

✓ removeChild: 9,059,580 ops/sec
• remove: 9,004,583 ops/sec
• textContent: 2,936,366 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
textContent
removeChild
remove

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

remove

31.0M/s

removeChild

31.0M/s

textContent

14.7M/s

View exact numbers

Test name	Executions per second
✓ remove	31,016,476 Ops/sec
removeChild	31,003,706 Ops/sec
textContent	14,675,191 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The provided JSON represents a benchmark named "textContent vs removechild vs remove!" that tests three different approaches to clear the text content of an HTML element.

1. `textContent`: Sets the text content of an element to an empty string.
2. `removeChild`: Removes all child nodes of an element and returns them, effectively clearing the element's content.
3. `remove`: Removes the first child node of an element using the `remove()` method (not a standard method in JavaScript; more on this later).

**Options Compared**

The three options being compared are:

* `textContent`: A DOM-level method that sets the text content of an element directly.
* `removeChild`: A DOM-level method that removes all child nodes and returns them, which can be used to clear an element's content by assigning its return value to a variable (e.g., `node.textContent = '';`).
* `remove`: A non-standard JavaScript method that is not supported in most browsers. We'll assume this is a custom or experimental implementation.

**Pros and Cons**

Here are the pros and cons of each approach:

1. `textContent`:
	* Pros: Fast, efficient, and widely supported across browsers.
	* Cons: May have varying behavior depending on the element's content type (e.g., text vs. HTML).
2. `removeChild`:
	* Pros: Flexible and can be used to clear an element's content by assigning its return value to a variable.
	* Cons: Requires more code and may have slightly slower performance compared to `textContent`.
3. `remove`: Non-standard implementation, which means it might not work in all browsers or environments.

**Library Usage**

None of the provided benchmarks use external libraries.

**Special JS Features/Syntax**

The `remove` method is not a standard JavaScript method and is likely a custom implementation. This highlights an important consideration: when working with non-standard implementations, be cautious about compatibility and potential issues across different browsers and environments.

**Other Alternatives**

If you wanted to test alternative approaches to clear the text content of an HTML element, some other options could include:

* Using `innerHTML` instead of `textContent`, which can be slower due to security restrictions.
* Using a library like jQuery, which provides its own methods for manipulating DOM elements (e.g., `.html()`).
* Experimenting with alternative libraries or frameworks that offer optimized string manipulation or DOM clearing functions.

Keep in mind that these alternatives would likely require additional setup and testing to ensure compatibility across different browsers and environments.

textContent vs removechild vs remove! (version: 0)

Comparing performance of: `textContent vs removeChild vs remove`

Created: 6 years ago by: Guest

Go to the latest result

textContent

removeChild

remove

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 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):

textContent vs removechild vs remove! (version: 0)

Comparing performance of: textContent vs removeChild vs remove

Created: 6 years ago by: Guest

Go to the latest result

textContent

removeChild

remove

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 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: `textContent vs removeChild vs remove`