Benchmark: innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText

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

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 8 runs

removeChild

7.9M/s

removeChild backwards

7.8M/s

innerText

4.2M/s

innerHTML

3.2M/s

Fastest: removeChild (2.5x faster)

View exact numbers

✓ removeChild: 7,880,482 ops/sec
• removeChild backwards: 7,830,864 ops/sec
• innerText: 4,235,333 ops/sec
• innerHTML: 3,168,978 ops/sec

Firefox 6 runs

removeChild

6.1M/s

removeChild backwards

6.0M/s

innerHTML

4.6M/s

innerText

4.1M/s

Fastest: removeChild (1.5x faster)

View exact numbers

✓ removeChild: 6,088,562 ops/sec
• removeChild backwards: 6,020,191 ops/sec
• innerHTML: 4,640,878 ops/sec
• innerText: 4,076,102 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
removeChild backwards
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 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 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

removeChild

19.4M/s

removeChild backwards

18.6M/s

innerText

6.0M/s

innerHTML

2.5M/s

View exact numbers

Test name	Executions per second
✓ removeChild	19,418,184 Ops/sec
removeChild backwards	18,649,826 Ops/sec
innerText	5,976,126 Ops/sec
innerHTML	2,455,344 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 benchmark and analyze each test case.

**Benchmark Definition Json**

The provided JSON defines two benchmarks: a script preparation code and four individual test cases. The script preparation code is used to create a HTML container element with 1000 child elements, which will be used as a baseline for the subsequent test cases.

**Script Preparation Code**

```javascript
var node = document.getElementById('container');
for (var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));
```

This code creates an HTML container element with the ID "container" and appends 1000 new child elements to it using a `for` loop.

**Individual Test Cases**

The four test cases are:

1. **innerHTML**: Sets the inner HTML of the container element to an empty string.
2. **removeChild (firstChild)**: Removes the first child element from the container element using the `removeChild()` method.
3. **removeChild (lastChild)**: Removes the last child element from the container element using the `removeChild()` method with a reference to the last child element.
4. **innerText**: Sets the inner text of the container element to an empty string.

**Library and Syntax**

None of these test cases use any JavaScript libraries or special features. The syntax used is standard JavaScript DOM manipulation methods.

**Options Compared**

The benchmark compares four different approaches:

1. `innerHTML`: Setting the inner HTML of the element.
2. `removeChild (firstChild)`: Removing the first child element using `removeChild()` with a reference to the first child element.
3. `removeChild (lastChild)`: Removing the last child element using `removeChild()` with a reference to the last child element.
4. `innerText`: Setting the inner text of the element.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **innerHTML**:
	* Pros: Simple and easy to implement, works well for most use cases.
	* Cons: Can be slow and inefficient, especially when dealing with large amounts of data or complex HTML structures.
2. **removeChild (firstChild)**:
	* Pros: Fast and efficient, as it only removes the first child element.
	* Cons: May not be suitable for all use cases, such as when removing the last child element is necessary.
3. **removeChild (lastChild)**:
	* Pros: Suitable for removing the last child element, but may be slower than `removeChild (firstChild)` due to the additional reference calculation.
	* Cons: May not be suitable for all use cases, such as when removing the first child element is necessary.
4. **innerText**:
	* Pros: Simple and easy to implement, works well for most use cases.
	* Cons: Can be slower than `innerHTML` due to the need to parse and manipulate the text content.

**Other Considerations**

The benchmark may also consider other factors, such as:

* Memory usage and allocation during each test case
* Garbage collection overhead
* Browser-specific optimizations or quirks

Overall, the benchmark aims to compare the performance of these four approaches in a controlled environment, providing insights into their strengths and weaknesses.

innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText (version: 0) Benchmark.js

Comparing performance of: `innerHTML vs removeChild vs removeChild backwards vs innerText`

Created: 8 years ago by: Guest

Go to the latest result

innerHTML

removeChild

removeChild backwards

innerText

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 8 runs

Firefox 6 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(firstChild) vs removechild(lastChild) vs innerText (version: 0) Benchmark.js

Comparing performance of: innerHTML vs removeChild vs removeChild backwards vs innerText

Created: 8 years ago by: Guest

Go to the latest result

innerHTML

removeChild

removeChild backwards

innerText

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 8 runs

Firefox 6 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 removeChild backwards vs innerText`