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

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 = '';
range
const rng = document.createRange(); rng.selectNodeContents(document.getElementById('container')); rng.deleteContents();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
removeChild backwards
innerText
range

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The measurethat.net website allows users to create and run JavaScript microbenchmarks. In this case, we have a single benchmark that tests different approaches for removing content from an HTML element. The benchmark consists of five individual test cases:

1. `innerHTML`
2. `removeChild` (removing the first child)
3. `removeChild backwards` (removing the last child)
4. `innerText`
5. `range`

**Test Case 1: innerHTML**

This test case tests removing all content from an element by setting its `innerHTML` property to an empty string.

```javascript
var node = document.getElementById('container');
node.innerHTML = '';
```

Pros:

* Simple and straightforward approach.
* No need to manually iterate over the element's children.

Cons:

* May not be as efficient if the element has a large number of children, since `innerHTML` is not optimized for this case.
* Does not allow for fine-grained control over which child elements are removed.

**Test Case 2: removeChild**

This test case tests removing all content from an element by repeatedly calling `removeChild` on its first child until there are no more children left.

```javascript
var node = document.getElementById('container');
while(node.firstChild) node.removeChild(node.firstChild);
```

Pros:

* Can be efficient if the element has a small number of children, since `removeChild` only removes the next child in the list.
* Allows for fine-grained control over which child elements are removed.

Cons:

* Requires manual iteration over the children, which can be error-prone and slow for large numbers of children.
* May not be suitable for elements with a variable number of children.

**Test Case 3: removeChild backwards**

This test case is similar to `removeChild`, but starts by removing the last child and works its way back up to the first child.

```javascript
var node = document.getElementById('container');
while(node.lastChild) node.removeChild(node.lastChild);
```

Pros:

* Can be efficient if the element has a small number of children, since `removeChild` only removes the next child in the list.
* Allows for fine-grained control over which child elements are removed.

Cons:

* Requires manual iteration over the children, which can be error-prone and slow for large numbers of children.
* May not be suitable for elements with a variable number of children.

**Test Case 4: innerText**

This test case tests removing all content from an element by setting its `innerText` property to an empty string.

```javascript
var node = document.getElementById('container');
node.innerText = '';
```

Pros:

* Simple and straightforward approach.
* Does not require manual iteration over the element's children.

Cons:

* May not be as efficient if the element has a large number of children, since `innerText` is not optimized for this case.
* Does not allow for fine-grained control over which child elements are removed.

**Test Case 5: range**

This test case tests removing all content from an element by creating a Range object and calling its `deleteContents` method.

```javascript
const rng = document.createRange();
rng.selectNodeContents(document.getElementById('container'));
rng.deleteContents();
```

Pros:

* Can be efficient if the element has a small number of children, since `deleteContents` only removes the content within the selected range.
* Allows for fine-grained control over which child elements are removed.

Cons:

* Requires creating and manipulating a Range object, which can be error-prone and slow for large numbers of children.
* May not be suitable for elements with a variable number of children.

**Library: DOM**

All test cases use the Document Object Model (DOM) library, which provides an API for interacting with HTML documents. The DOM library is a fundamental part of JavaScript development and is used extensively in web browsers.

**Special JS feature: none**

There are no special JavaScript features or syntax used in these test cases. They are all standard JavaScript code that leverages the DOM library.

**Alternatives**

Other approaches to removing content from an HTML element might include:

* Using a library like jQuery, which provides its own implementation of `remove` methods.
* Using a custom solution that manually iterates over the children and removes them individually.
* Using a different data structure, such as an array or object, to represent the child elements.

However, these alternatives may not be as efficient or convenient as the approaches tested in this benchmark.

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/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	2578538.0 Ops/sec
removeChild	3157158.2 Ops/sec
removeChild backwards	2509523.5 Ops/sec
innerText	1952725.2 Ops/sec
range	667081.6 Ops/sec

Related benchmarks:

innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText vs range() (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

innerHTML

removeChild

removeChild backwards

innerText

range

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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