Benchmark: element.remove() vs display: none

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:

remove()
var element = ul.firstElementChild; while (element) { var element = ul.firstElementChild; element && element.remove(); }
display: none
var elements = Array.prototype.slice.call(container); for (var i = 0; i < elements.length; i++) { elements[i].style.display = "none"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
remove()
display: none

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 153 on Linux

View result in a separate tab

remove()

483.2M/s

display: none

14.0M/s

View exact numbers

Test name	Executions per second
✓ remove()	483,153,856 Ops/sec
display: none	13,993,912 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, hosted on MeasureThat.net, compares the performance of two approaches to remove or hide elements in HTML:

1. `element.remove()`
2. Setting `display: none`

**Approach 1: `element.remove()`**

This approach uses the `remove()` method to delete an element from the DOM. The test case iterates over all child elements of a container (`ul`) and calls `remove()` on each one.

Pros:

* This approach is concise and easy to read.
* It modifies the original DOM, which can be beneficial in certain scenarios (e.g., updating page content).

Cons:

* Removing an element from the DOM can lead to memory leaks if not properly handled.
* This approach may not be suitable for all use cases, such as when working with lazy-loaded or dynamically generated content.

**Approach 2: Setting `display: none`**

This approach sets the `display` CSS property of each element to `none`, effectively hiding it without removing it from the DOM.

Pros:

* This approach does not modify the original DOM and is generally safer for preventing memory leaks.
* It allows elements to be restored to their visible state when needed.

Cons:

* This approach can lead to unnecessary DOM manipulation, which may impact performance in certain scenarios.
* Setting `display: none` can also cause layout issues if not properly handled.

**Library Used**

None of the provided benchmark test cases use any external libraries. The code is self-contained and only utilizes built-in JavaScript features.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require prior knowledge or expertise to understand.

**Other Alternatives**

Besides `element.remove()` and setting `display: none`, other approaches to remove or hide elements include:

* Using the `classList.add()` method with a CSS class that hides the element (e.g., `.hide`).
* Utilizing a library like jQuery's `hide()` function.
* Leveraging CSS transitions or animations to fade out an element.

**Benchmark Preparation Code Explanation**

The script preparation code creates a container (`<div id="container">`) and generates 2000 child elements (`<li>`), which are then appended to the container. This helps create a large number of elements for the benchmark test cases to iterate over.

The HTML preparation code simply includes the `<div id="container"></div>` element in the HTML document, providing a container for the generated elements.

element.remove() vs display: none (version: 0) Benchmark.js

Comparing performance of: `remove() vs display: none`

Created: 3 years ago by: Guest

Go to the latest result

remove()

display: none

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

element.remove() vs display: none (version: 0) Benchmark.js

Comparing performance of: remove() vs display: none

Created: 3 years ago by: Guest

Go to the latest result

remove()

display: none

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: `remove() vs display: none`