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"; }

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 21 runs

removeChild

15.6M/s

display:none on each element

3.7M/s

Fastest: removeChild (4.3x faster)

View exact numbers

✓ removeChild: 15,647,146 ops/sec
• display:none on each element: 3,669,856 ops/sec

Firefox 7 runs

removeChild

84.0M/s

display:none on each element

6.9M/s

Fastest: removeChild (12.1x faster)

View exact numbers

✓ removeChild: 84,004,712 ops/sec
• display:none on each element: 6,925,105 ops/sec

Mobile Results:

Chrome 6 runs

removeChild

15.0M/s

display:none on each element

2.0M/s

Fastest: removeChild (7.6x faster)

View exact numbers

✓ removeChild: 15,000,324 ops/sec
• display:none on each element: 1,985,652 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Mac OS X 10.15

View result in a separate tab

removeChild

116.9M/s

display:none on each element

12.3M/s

View exact numbers

Test name	Executions per second
✓ removeChild	116,920,200 Ops/sec
display:none on each element	12,253,815 Ops/sec

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

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

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

Created: 6 years ago by: Guest

Go to the latest result

removeChild

display:none on each element

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 21 runs

Firefox 7 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 6 years ago by: Guest

Go to the latest result

removeChild

display:none on each element

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 21 runs

Firefox 7 runs

Mobile Results:

Chrome 6 runs

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: `removeChild vs display:none on each element`