Benchmark: innerhtml vs removechild

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)

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 25 runs

removeChild

6.2M/s

innerHTML

3.6M/s

Fastest: removeChild (1.7x faster)

View exact numbers

✓ removeChild: 6,212,595 ops/sec
• innerHTML: 3,639,913 ops/sec

Firefox 5 runs

removeChild

4.7M/s

innerHTML

3.7M/s

Fastest: removeChild (1.3x faster)

View exact numbers

✓ removeChild: 4,660,412 ops/sec
• innerHTML: 3,658,790 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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Linux

View result in a separate tab

removeChild

3.6M/s

innerHTML

2.8M/s

View exact numbers

Test name	Executions per second
✓ removeChild	3,571,242 Ops/sec
innerHTML	2,804,951 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 provided benchmark definition and test cases.

**Benchmark Definition:**

The benchmark measures the performance difference between using `innerHTML` and `removeChild` methods on an HTML element in JavaScript.

**Script Preparation Code:**

The script preparation code creates a container element with 1000 child elements, which will be used as a test subject for both methods. The `node.appendChild(document.createElement('div'))` loop adds the child elements to the container.

**Html Preparation Code:**

The HTML preparation code defines a simple HTML structure with an empty `container` element that will be used by the script.

**Individual Test Cases:**

There are two test cases:

1. **Test Name:** `innerHTML`
	* Benchmark Definition: `var node = document.getElementById('container');\r\nnode.innerHTML = '';`
This test case measures the execution time of setting an empty string as the innerHTML of the container element.
2. **Test Name:** `removeChild`
	* Benchmark Definition: `var node = document.getElementById('container');\r\nwhile(node.firstChild) node.removeChild(node.firstChild)`
This test case measures the execution time of removing all child nodes from the container element.

**Library and Purpose:**

The benchmark uses no external libraries, as it only relies on built-in JavaScript features and DOM manipulation.

**Special JS Features/Syntax:**

There is no special JavaScript feature or syntax being used in this benchmark. The focus is solely on comparing the performance of two basic DOM manipulation methods.

**Pros and Cons of Approaches:**

1. **innerHTML**:
	* Pros: Simple to implement, easy to understand.
	* Cons: Can be inefficient for large datasets, as it creates a new string object and potentially causes DOM rebalancing.
2. **removeChild**:
	* Pros: More efficient for large datasets, as it directly modifies the DOM structure without creating intermediate objects.
	* Cons: Requires iterating over child nodes, which can be slower for very large datasets.

**Other Alternatives:**

If you wanted to optimize this benchmark further or explore alternative approaches, here are some considerations:

1. **Use a more efficient innerHTML approach**: Modern browsers offer more efficient `innerHTML` methods, such as `innerHTML.replaceWith()`, which can reduce the overhead of creating intermediate string objects.
2. **Use a DOM patching library**: Libraries like DOMPurify or jsdom can help optimize DOM manipulation by patching changes to the DOM structure instead of re-creating it entirely.
3. **Use a custom iterator**: Instead of using `while (node.firstChild)`, you could use a custom iterator function to iterate over child nodes, which might be faster and more efficient for very large datasets.

Keep in mind that these alternatives may require significant changes to the benchmark setup and script preparation code.

innerhtml vs removechild (version: 0) Benchmark.js

Comparing performance of: `innerHTML vs removeChild`

Created: 10 years ago by: Guest

Go to the latest result

innerHTML

removeChild

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 25 runs

Firefox 5 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 (version: 0) Benchmark.js

Comparing performance of: innerHTML vs removeChild

Created: 10 years ago by: Guest

Go to the latest result

innerHTML

removeChild

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 25 runs

Firefox 5 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`