Benchmark: Test hidden vs display none

HTML Preparation code:

<button type="button" id="btnSaveQuerySet" disabled class="btn btn-success">Sauvegarder</button>
    <button type="button" id="btnCreateQuerySet" disabled class="btn btn-success">Créer</button>
    <button type="button" id="btnDeleteQuerySet" class="btn btn-danger">Supprimer</button>

Script Preparation code:

function testBtnA(showBtn){
    const btnDelete = document.getElementById('btnDeleteQuerySet');
      let btnToShow, btnToHide;
  
      if (showBtn === "create") {
          btnToShow = document.getElementById('btnCreateQuerySet');
          btnToHide = document.getElementById('btnSaveQuerySet');
          btnDelete.style.display = "none";
      } else if (showBtn === "save") {
          btnToShow = document.getElementById('btnSaveQuerySet');
          btnToHide = document.getElementById('btnCreateQuerySet');
          btnDelete.style.display = "block";
      }
  
      btnToShow.disabled = true;
      btnToShow.style.display = "block";
      btnToHide.style.display = "none";
  }
  
  function testBtnB(showBtn){
   const btnDelete = document.getElementById('btnDeleteQuerySet');
      let btnToShow, btnToHide;
  
      if (showBtn === "create") {
          btnToShow = document.getElementById('btnCreateQuerySet');
          btnToHide = document.getElementById('btnSaveQuerySet');
          btnDelete.style.display = "none";
      } else if (showBtn === "save") {
          btnToShow = document.getElementById('btnSaveQuerySet');
          btnToHide = document.getElementById('btnCreateQuerySet');
          btnDelete.style.display = "block";
      }
  
      btnToShow.disabled = true;
      btnToShow.style.visibility = "visible"
      btnToHide.style.display = "hidden";
  }

Tests:

testA
for(let i = 0;i < 2000; ++i){ testBtnA("create") }
testB
for(let i = 0;i < 2000; ++i){ testBtnB("create") }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
testA
testB

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; rv:126.0) Gecko/20100101 Firefox/126.0

Browser/OS: Firefox 126 on Windows

View result in a separate tab

Test name	Executions per second
testA	147.6 Ops/sec
testB	136.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on this particular benchmark.

**Benchmark Overview**

The benchmark is designed to compare two approaches: `display` vs `visibility`. The test case, "Test hidden vs display none", creates a button layout with three buttons: Create, Save, and Delete. The script preparation code defines two functions, `testBtnA` and `testBtnB`, which toggle the visibility of specific buttons based on a show/hidden parameter.

**Options Compared**

The benchmark compares two options:

1. **`display` property**: This approach sets the `display` CSS property to either `"none"` or `"block"`. When `display` is set to `"none"`, the button is hidden, and when it's set to `"block"`, the button becomes visible.
2. **`visibility` property**: This approach sets the `visibility` CSS property to either `"hidden"` or `"visible"`. When `visibility` is set to `"hidden"`, the button is hidden, and when it's set to `"visible"`, the button becomes visible.

**Pros and Cons**

* **`display` property:**
	+ Pros:
		- Generally faster and more efficient for hiding/showing elements.
		- Can be optimized by using a single `display` property value instead of setting it to `"none"` or `"block"`.
	+ Cons:
		- May not work correctly in certain cases, such as when the element is used as a background image or when the `display` property is set to an invalid value.
* **`visibility` property:**
	+ Pros:
		- Can be more flexible and forgiving than the `display` property, especially for complex layouts.
		- Works correctly even when the element is used as a background image or has an invalid `display` property value.
	+ Cons:
		- May be slower and less efficient than using the `display` property.

**Library and Purpose**

The benchmark uses the `document.getElementById()` method to access the button elements, which is a standard JavaScript API for accessing DOM elements. The purpose of this library is to provide a simple way to manipulate the HTML document structure.

**Special JS Features or Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's normally available in modern browsers. However, it does rely on the `let` keyword with the "introduced in ECMAScript 2015" specification version, which is a relatively recent feature.

**Alternative Approaches**

Other alternatives for hiding/showing elements include:

* Using CSS transforms (e.g., `transform: translateX(-100%)`) or animations to hide/show elements.
* Using JavaScript libraries like jQuery or React to manage DOM updates.
* Leveraging browser-specific features, such as Chrome's `visibility` property or Firefox's `will-change` property.

Overall, this benchmark provides a simple and straightforward way to compare the performance of two approaches: using the `display` property vs the `visibility` property.

Related benchmarks:

Test hidden vs display none (version: 1)

Comparing performance of: testA vs testB

Created: 4 years ago by: Registered User

Jump to the latest result

testA

testB

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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