Benchmark: innerhtml vs removechild vs remove vs removeLast

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 10000; 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();
remove last
while (node.lastChild) node.lastChild.remove();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
remove
remove last

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	5058419.0 Ops/sec
removeChild	15060554.0 Ops/sec
remove	14854914.0 Ops/sec
remove last	14725305.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark is designed to compare the performance of three different approaches for removing elements from an HTML node:

1. `removeChild()`: Removes the first child element of the specified node.
2. `remove()`: Removes all child elements of the specified node.
3. `removeLast()`: Removes the last child element of the specified node.

**Script Preparation Code**

The script preparation code creates a container element and appends 10,000 div elements to it using `appendChild()`. This creates a large number of nodes in the DOM, which will be used as the test subject for each benchmarking approach.

**Html Preparation Code**

The html preparation code simply includes a container element with an id attribute, which is used by the script preparation code.

**Individual Test Cases**

Each test case represents a single benchmarking approach. The `Benchmark Definition` field specifies the JavaScript code that will be executed to remove elements from the container node using the chosen approach.

Here's a brief explanation of each test case:

1. `innerHTML`: Sets the inner HTML of the container element to an empty string, effectively removing all child elements.
2. `removeChild`: Enters a loop that removes the first child element of the container node using `removeChild()`.
3. `remove`: Enters a loop that removes all child elements of the container node using `remove()`.
4. `removeLast`: Enters a loop that removes the last child element of the container node using `removeLast()`.

**Library and Special JS Features**

None of the test cases use any external libraries, but they do utilize the built-in DOM methods for manipulating nodes.

There are no special JavaScript features or syntax used in these test cases. The code is straightforward and uses standard DOM APIs.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

1. `removeChild`:
	* Pros: Efficient, as it only removes one element at a time.
	* Cons: Requires multiple iterations to remove all elements.
2. `remove`:
	* Pros: More efficient than `removeChild`, as it removes all elements in a single operation.
	* Cons: May not be suitable for very large sets of elements, as it can cause performance issues due to DOM traversal.
3. `removeLast`:
	* Pros: Easy to implement and understand, as it only requires removing the last element.
	* Cons: May not be as efficient as other approaches, especially for large sets of elements.

**Other Alternatives**

Some alternative approaches that could be used in a benchmarking scenario like this include:

1. Using `Array.prototype.slice()` or `Array.prototype.splice()` to remove elements from the container node's child array.
2. Utilizing Web Workers or parallel processing techniques to execute multiple iterations simultaneously.
3. Employing more advanced DOM traversal methods, such as using `NodeIterator` or `DOMTraverser`, to optimize element removal.

However, these alternatives may not be directly relevant to the specific benchmark being measured, and would likely require additional modifications to the test setup and code.

Related benchmarks:

innerhtml vs removechild vs remove vs removeLast (version: 4)

Comparing performance of: innerHTML vs removeChild vs remove vs remove last

Created: 6 years ago by: Registered User

Jump to the latest result

innerHTML

removeChild

remove

remove last

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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