Benchmark: display: none vs content-visibility: hidden

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:

display: none
var elements = Array.prototype.slice.call(container); for (var i = 0; i < elements.length; i++) { elements[i].style.display = "none"; }
content-visibility: hidden
var elements = Array.prototype.slice.call(container); for (var i = 0; i < elements.length; i++) { elements[i].style.contentVisibility = "hidden"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
display: none
content-visibility: hidden

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.6.2

View result in a separate tab

Test name	Executions per second
display: none	28057862.0 Ops/sec
content-visibility: hidden	27460750.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 benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark definition provides two options for hiding content on a webpage:

1. `display: none`: This method sets the display property of an element to `none`, effectively hiding it from view. However, this approach can lead to additional overhead due to the need to update the layout and positioning of elements that may be affected by the hidden element.
2. `content-visibility: hidden`: This method uses a new CSS property called `content-visibility` to hide content without affecting the layout or rendering of other elements on the page. This approach is designed to provide better performance and responsiveness, especially when dealing with large amounts of content.

**Options Compared**

The benchmark compares the execution time of both approaches:

* `display: none`: Sets the display property of an element to `none` using `Array.prototype.slice.call()` to get all elements from the container and then iterating over them.
* `content-visibility: hidden`: Sets the `content-visibility` property of an element to `hidden` using the same approach as above.

**Pros and Cons**

### display: none

Pros:

* Simple implementation
* Wide browser support

Cons:

* Can lead to additional overhead due to layout updates
* May affect rendering performance

### content-visibility: hidden

Pros:

* Provides better performance and responsiveness, especially with large amounts of content
* Reduces the need for layout updates

Cons:

* Limited browser support (mainly newer browsers)
* May require additional CSS rules to work correctly

**Library and Purpose**

The benchmark uses the `content-visibility` property, which is a relatively new feature introduced in CSS3. This property allows you to control when content becomes visible or hidden without affecting the layout or rendering of other elements on the page.

In this specific case, the library being used is not explicitly mentioned, but it's likely that the browser's engine (e.g., Blink for Chrome) provides native support for this feature.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. The code uses standard JavaScript and CSS properties.

**Alternatives**

Other alternatives to compare when hiding content include:

* `visibility: hidden`: This method sets the visibility property of an element to `hidden`, which can lead to additional overhead due to layout updates.
* Using a third-party library or plugin for content hiding, such as jQuery's `.hide()` method.
* Implementing custom solutions using JavaScript and CSS, but these may be less efficient than using the `content-visibility` property.

In summary, this benchmark compares two approaches to hiding content on a webpage: `display: none` and `content-visibility: hidden`. The latter approach provides better performance and responsiveness, especially with large amounts of content, but has limited browser support.

Related benchmarks:

display: none vs content-visibility: hidden (version: 0)

Comparing performance of: display: none vs content-visibility: hidden

Created: 3 years ago by: Guest

Jump to the latest result

display: none

content-visibility: hidden

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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