Benchmark: FORK: removeChild vs display="none" performance benchmark v2

FORK: removeChild vs display="none" performance benchmark v2 (version: 0) Benchmark.js

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

Go to the latest result

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) { var element = ul.firstElementChild; element && ul.removeChild(element); }
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

testing display none with different iterator

2332.9M/s

removeChild

112.9M/s

View exact numbers

Test name	Executions per second
✓ testing display none with different iterator	2,332,869,376 Ops/sec
removeChild	112,866,816 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is used to compare the performance of two approaches: removing child elements from an unordered list (`ul`) by using `removeChild()` or setting their `display` property to `none`. The benchmark is designed to measure the performance difference between these two methods, which can have a significant impact on webpage rendering and overall user experience.

**Options Compared**

Two options are compared in this benchmark:

1. **`removeChild()`**: This method involves explicitly removing child elements from the DOM using the `removeChild()` function.
2. **`display="none"`**: This method sets the `display` property of each child element to `none`, effectively hiding them without removing them from the DOM.

**Pros and Cons**

**`removeChild()`**:

Pros:

* Directly removes elements from the DOM, reducing memory usage and garbage collection overhead.
* Can be more efficient for large datasets or complex DOM structures.

Cons:

* May require additional CPU cycles to iterate over child elements and remove them.
* Can lead to slower page loading times if not optimized properly.

**`display="none"`**:

Pros:

* Sets the `display` property without removing elements from the DOM, reducing overhead on garbage collection and memory usage.
* Can be faster for smaller datasets or simple DOM structures.

Cons:

* May not work as expected in certain situations (e.g., when using specific CSS properties or vendor prefixes).
* Can lead to slower page loading times if not optimized properly.

**Library/External Functionality**

There is no library or external functionality used in this benchmark. The only library being referenced is the `DOM` API, which is built-in to JavaScript.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's standard in modern browsers.

**Other Alternatives**

If the goal is to compare performance between removing child elements and setting their `display` property to `none`, other alternatives could include:

* Using a virtual DOM library (e.g., React, Virtual DOM) to simulate the rendering of child elements.
* Implementing a custom rendering engine or renderer to render child elements using different methods.
* Comparing the performance of other methods, such as:
	+ Using CSS animations or transitions to animate element visibility.
	+ Employing ARIA attributes to provide alternative text for hidden elements.

However, MeasureThat.net's focus on comparing the performance of two specific DOM-related operations (`removeChild()` and `display="none"`) makes it an ideal tool for this particular benchmark.