Benchmark: remove() vs display:none on each element

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 elements = Array.prototype.slice.call(container); for (var i = 0; i < elements.length; i++) { elements[i].remove(); }
display:none on each element
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 on each element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
remove	7395936.5 Ops/sec
display:none on each element	7490475.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 provided JSON data and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark tests two approaches to hide elements in an HTML list:

1. **remove() method**: This approach removes each element from the DOM using the `remove()` method.
2. **display:none style**: This approach sets the `display` style of each element to `none`, effectively hiding them.

**Pros and Cons:**

* **Remove() method**:
	+ Pros:
		- Can be used for more complex DOM manipulations (e.g., adding or removing events, classes, etc.).
		- Can be faster for large numbers of elements when the browser has already rendered the elements.
	+ Cons:
		- Can be slower than setting `display:none` because it involves updating the DOM and potentially triggering layout recalculations.
* **Display: none style**:
	+ Pros:
		- Faster because it only sets a CSS property, which is typically less expensive than updating the DOM.
		- More efficient for hiding elements that are not needed immediately (e.g., lazy-loaded content).
	+ Cons:
		- May not work as expected if the element's parent or sibling contains layout-dependent elements.

**Library and purpose:**

In this benchmark, the `Array.prototype.slice.call()` method is used to convert the `container` DOM element into an array of child elements. This allows for iterating over the elements using a `for` loop. The `remove()` and `style.display = "none"` methods are then applied to each element in the array.

**Special JS feature or syntax:**

None mentioned explicitly, but note that `Array.prototype.slice.call()` is an older way of creating an array from a DOM element. Modern browsers support using the spread operator (`[...container]`) or `Array.from(container)` instead, which are generally more efficient and concise.

**Other alternatives:**

In addition to `remove()` and setting `display:none`, other approaches to hide elements could include:

* Using CSS classes (e.g., `.hidden`) and adding a CSS rule to hide the class.
* Using jQuery's `hide()` method (which is not used in this benchmark, but could be an alternative).
* Using a library like React or Vue.js for more complex DOM updates.

**Benchmark preparation code:**

The script prepares the test by:

1. Creating an HTML container element with ID `container`.
2. Creating an unordered list (`ul`) and pushing 2000 `<li>` elements into an array (`html`).
3. Appending the `ul` to the container.
4. Assigning the `html` array to the container's `innerHTML`.

**Html preparation code:**

The HTML provides a simple `<div>` element with ID `container`, which serves as the root for the test.

Keep in mind that this benchmark is likely designed to compare performance between different browser implementations and versions, rather than optimizing for specific use cases.

Related benchmarks:

remove() vs display:none on each element (version: 0)

Comparing performance of: remove vs display:none on each element

Created: 6 years ago by: Guest

Jump to the latest result

remove

display:none on each element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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