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:

removeChild
var element = ul.firstElementChild; while (element) { var element = ul.firstElementChild; element && ul.removeChild(element); }
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
removeChild
display:none on each element

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
removeChild	56497604.0 Ops/sec
display:none on each element	3669855.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents two microbenchmarks that measure the performance of JavaScript in removing elements from an unordered list (`ul`) and setting the `display` property to `"none"` on each element.

In the first benchmark, "removeChild", the test removes elements from the list using a while loop. In the second benchmark, "display:none on each element", the test sets the `display` property of each element to `"none"` using the `style` object.

**Options being compared**

The two options being compared are:

1. **Direct removal using `removeChild()`**: This method uses the `removeChild()` function to remove elements from the list.
2. **Setting `display` property to `"none"`**: This method sets the `display` property of each element to `"none"`, effectively hiding it.

**Pros and Cons**

1. **Direct removal using `removeChild()`**:
	* Pros: efficient, simple, and widely supported.
	* Cons: may cause issues if not used carefully (e.g., removing elements that are still in use).
2. **Setting `display` property to `"none"`**:
	* Pros: easy to implement, doesn't modify the DOM structure, and is less likely to cause issues with other elements.
	* Cons: may be slower due to the additional CSS processing required.

**Library usage**

None of the provided benchmarks use external libraries. However, the `Array.prototype.slice.call()` function is used in one of the benchmark definitions, which is a standard JavaScript method for converting an array-like object into a true array.

**Special JS feature or syntax**

The only special feature used in these benchmarks is the use of template literals (e.g., `<li>${i}</li>`) and the spread operator (e.g., `Array.prototype.slice.call(container)`). These are modern JavaScript features that were introduced in ECMAScript 2015.

**Alternative approaches**

Other alternatives to compare in this benchmark could include:

1. **Using a different data structure**: Instead of using an unordered list, the test could use a DOM node collection or an array-based approach.
2. **Using a different removal method**: In addition to `removeChild()`, the test could also measure the performance of other methods for removing elements, such as `innerHTML = ''` or `outerHTML = ''`.
3. **Adding more elements**: The test could be modified to generate more elements and see how the browser's performance scales.
4. **Using a more complex HTML structure**: The test could use a more complex HTML structure, such as a nested list or table, to simulate real-world scenarios.

These alternative approaches would help to better understand the behavior of different browsers under various conditions, making it easier to identify potential performance issues and optimize browser implementations.

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

removeChild

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 6 months ago):