Benchmark: removeChild vs display="none" performance benchmark

HTML Preparation code:

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

Script Preparation code:

var container = document.getElementById('container');
ul = document.createElement('ul');
var html = [];
    for ( var i=0; i<2000; i += 1 ) {
  	html.push(`<li>${i}</li>`);
}
 ul.innerHTML = html.join('');
 container.appendChild(ul);

Tests:

removeChild
var element = ul.firstElementChild; while (element) { ul.removeChild(element); element = ul.firstElementChild; }
testing display none with different iterator
var element = ul.firstElementChild; while (element) { element.style.display="none" element = element.nextElementSibling; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
removeChild
testing display none with different iterator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Windows

View result in a separate tab

Test name	Executions per second
removeChild	105994488.0 Ops/sec
testing display none with different iterator	2310985472.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 benchmark and its components.

**Benchmark Overview**

The benchmark, named "removeChild vs display=\"none\" performance benchmark", tests two approaches to removing child elements from an HTML list: using the `removeChild` method versus setting the `display` property to `"none"`.

**Script Preparation Code**

The script preparation code creates a container element and appends an unordered list (`ul`) with 2000 list items (`li`). The list is populated by pushing the list item strings into an array (`html`) using a for loop. Finally, the script appends the `ul` element to the container.

```javascript
var container = document.getElementById('container');
var ul = document.createElement('ul');
var html = [];
for (var i = 0; i < 2000; i += 1) {
    html.push(`<li>${i}</li>`);
}
ul.innerHTML = html.join('');
container.appendChild(ul);
```

**Html Preparation Code**

The HTML preparation code simply creates a container element with an ID of `"container"`.

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

**Individual Test Cases**

There are two test cases:

1. **"removeChild"`: This test case uses the `removeChild` method to remove child elements from the list. It iterates over the first element child using a while loop and removes each element using `ul.removeChild(element)`.
2. **"testing display none with different iterator"`: This test case sets the `display` property of each element to `"none"` instead of removing it directly. It uses a while loop to iterate over the next sibling element (`element = element.nextElementSibling`) and sets its `display` property to `"none"`.

**Library and Special JS Feature**

There are no libraries used in this benchmark, but there is a special feature being tested: the use of `nextElementSibling` instead of `firstElementChild`. This feature allows accessing the next sibling element without having to check if it exists.

**Pros and Cons of Approaches**

1. **"removeChild"`:
	* Pros:
		+ More efficient, as it directly removes the element from the DOM.
		+ Less code is needed, as it only requires a single method call.
	* Cons:
		+ May cause more DOM reflows, leading to slower performance.
2. **"testing display none with different iterator"`:
	* Pros:
		+ Faster execution time due to reduced DOM reflows.
	* Cons:
		+ More code is needed, as it requires iterating over the sibling elements and setting their `display` property.

**Other Considerations**

When choosing between these approaches, consider the following:

* If you need to frequently remove elements from the DOM, using `removeChild` might be more efficient.
* However, if you're dealing with a large number of elements and want to minimize DOM reflows, using `display: none` might be a better choice.

**Alternatives**

Other alternatives for removing child elements include:

* Using `querySelectorAll` and `remove()`, which can be faster than `removeChild` for large datasets.
* Using CSS transforms or opacity instead of `display: none`, which can reduce the number of DOM operations.
* Using a library like React or Angular, which provide optimized rendering and DOM manipulation APIs.

Related benchmarks:

removeChild vs display="none" performance benchmark (version: 0)

This benchmark is a fork of a different one. This time, using a different way to iterate childs for display:none. I was worried the original benchmark was not being fair.

Comparing performance of: removeChild vs testing display none with different iterator

Created: 2 years ago by: Guest

Jump to the latest result

removeChild

testing display none with different iterator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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