Benchmark: innerHTML vs removeChild(node.firstChild) vs removeChild(node.lastChild)

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild(node.firstChild)
removeChild(node.lastChild)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 99 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	2562256.8 Ops/sec
removeChild(node.firstChild)	5704523.0 Ops/sec
removeChild(node.lastChild)	5713155.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what each test case is measuring, along with their pros and cons.

**Benchmark Definition**

The benchmark measures the performance of three different approaches for removing child nodes from an HTML element:

1. `innerHTML`: Setting the innerHTML property of the element to an empty string.
2. `removeChild(node.firstChild)`: Using a while loop to remove each child node one by one, starting from the first child node.
3. `removeChild(node.lastChild)`: Using a while loop to remove each child node one by one, starting from the last child node.

**Pros and Cons of Each Approach**

1. **innerHTML**: This approach is likely to be the fastest because it only requires setting a new value on the element's innerHTML property, which is a relatively lightweight operation.
2. **removeChild(node.firstChild)**: This approach can be slower than `innerHTML` because it involves iterating over all child nodes and removing each one individually. However, this method ensures that no orphaned elements are left in the DOM, making it more suitable for certain use cases (e.g., when you want to remove all child nodes without affecting their parent).
3. **removeChild(node.lastChild)**: This approach is similar to `removeChild(node.firstChild)`, but it starts from the last child node instead of the first. The performance difference between these two approaches is likely to be negligible.

**Library and Special JS Features**

None of the provided test cases use any libraries or special JavaScript features beyond standard DOM APIs.

**Other Considerations**

* The benchmark creates a large number of child nodes (1000) in each iteration, which may affect the results. In practice, you might want to reduce this number for more realistic performance measurements.
* The benchmark uses Chrome 99 as the test browser. Results might vary with other browsers or versions.

**Alternatives**

If you're interested in exploring alternative approaches or testing different scenarios, some alternatives could include:

1. Using `innerHTML` with a `replaceAll()` method instead of `innerHTML = ''`.
2. Using `removeChild()` with a single call, instead of a while loop.
3. Creating and removing elements using DOM mutations (e.g., `createElement()`, `appendChild()`, `removeChild()`).
4. Testing other DOM-related operations, such as updating element attributes or text content.

Keep in mind that the choice of alternative approaches depends on your specific use case and performance requirements.

Related benchmarks:

innerHTML vs removeChild(node.firstChild) vs removeChild(node.lastChild) (version: 0)

Comparing performance of: innerHTML vs removeChild(node.firstChild) vs removeChild(node.lastChild)

Created: 2 years ago by: Guest

Jump to the latest result

innerHTML

removeChild(node.firstChild)

removeChild(node.lastChild)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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