Benchmark: 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:

removeChild
var element = ul.firstElementChild; while (element) { var element = ul.firstElementChild; element && ul.removeChild(element); }
display:none
ul.style.display = "none";

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

removeChild

8.5M/s

display:none

2.0M/s

Fastest: removeChild (4.3x faster)

View exact numbers

✓ removeChild: 8,470,142 ops/sec
• display:none: 1,982,577 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

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Windows

View result in a separate tab

removeChild

58.8M/s

display:none

2.1M/s

View exact numbers

Test name	Executions per second
✓ removeChild	58,789,256 Ops/sec
display:none	2,125,429 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Benchmark Description**

The provided JSON represents two test cases for JavaScript microbenchmarks on the MeasureThat.net website. The tests aim to measure the performance of two different approaches: removing elements from an unordered list using `removeChild` and hiding elements using `display:none`.

**Options Compared**

Two options are compared:

1. **Removing elements using `removeChild`**: This approach iterates through the list of elements, finds each element's first child, and removes it until there are no more elements.
2. **Hiding elements using `display:none`**: This approach sets the display style of all elements in the unordered list to `none`, effectively hiding them.

**Pros and Cons**

1. **Removing Elements with `removeChild`**:
	* Pros:
		+ Efficient way to remove specific elements, as it only removes the requested element.
		+ Can be used when you need to remove elements based on a specific condition.
	* Cons:
		+ Iterates through the list of elements, which can lead to slower performance for large lists.
2. **Hiding Elements with `display:none`**:
	* Pros:
		+ Faster than removing individual elements, as it only sets a single property.
	* Cons:
		+ Does not remove the element from the DOM; instead, it hides it by setting its display style to `none`.
		+ May lead to additional rendering or layout issues if the hidden elements are still referenced elsewhere in the code.

**Library and Purpose**

The `removeChild` test case uses the built-in `Element.prototype.removeChild()` method of the DOM API. This method is used to remove a specified element from its parent node.

**JavaScript Features or Syntax**

Neither of the test cases utilizes any special JavaScript features or syntax.

**Other Considerations**

* The test cases are designed to measure performance, so it's essential to consider factors like browser rendering and layout, as they can impact the results.
* In a real-world scenario, you might want to consider using more efficient data structures or algorithms for removing elements from an unordered list.

**Alternative Approaches**

For removing elements, alternative approaches could include:

1. Using a data structure like a linked list or a tree to store and manage the elements.
2. Utilizing a library like jQuery's `.remove()` method, which can be more efficient than using `removeChild` iteratively.
3. Implementing a custom algorithm for removing elements, such as using a queue or a stack.

For hiding elements, alternative approaches could include:

1. Using CSS classes or attributes to hide elements instead of setting the display style to `none`.
2. Utilizing a library like React's `.hide()` method or a CSS-in-JS solution.
3. Implementing a custom algorithm for hiding elements, such as using a separate layer or overlay.

Keep in mind that these alternative approaches may have their own trade-offs and considerations depending on the specific use case and requirements.

remove vs display:none (version: 5) Benchmark.js

Comparing performance of: `removeChild vs display:none`

Created: 8 years ago by: Registered User

Go to the latest result

removeChild

display:none

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 (version: 5) Benchmark.js

Comparing performance of: removeChild vs display:none

Created: 8 years ago by: Registered User

Go to the latest result

removeChild

display:none

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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`