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

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days 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.

Latest run results:

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

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

Browser/OS: Firefox 75 on Windows

View result in a separate tab

Test name	Executions per second
remove	4465134.0 Ops/sec
display:none on each element	4472134.0 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

remove

display:none on each element

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):