Benchmark: display vs position benchmark

HTML Preparation code:

<style type="text/css">
    .hide {
        display: none;
    }
    .pos {position: absolute !important;
       top: -9999px !important;
       left: -9999px !important;
      }
    
</style>
<div id="container"></div>

Script Preparation code:

var container = document.getElementById('container');
var item;
for (let i = 0; i < 100; i += 1) {
  	item = document.createElement('div')
  	const ul = document.createElement('ul');
	let html = [];
    for (let j = 0; j < 2000; j += 1) {
        html.push(`<li>${j}</li>`);
    }
	ul.innerHTML = html.join('');
	item.appendChild(ul);
 	container.appendChild(item)
}

Tests:

show hide by display
let i = 3000; while (i--) { item.classList.add("hide"); item.classList.remove("hide"); }
show hide by position
let i = 3000; while (i--) { item.classList.add("pos"); item.classList.remove("pos"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
show hide by display
show hide by position

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and individual test cases to explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmarking script that creates a container element with multiple `div` elements inside it. Each `div` contains an unordered list (`ul`) with 2000 list items. The benchmark tests two approaches:

1. Display-based approach: The test case uses the `display` CSS property to hide and show the elements.
2. Position-based approach: The test case uses the `position` CSS property to position absolute and then remove that positioning.

**Options Compared**

The two options being compared are:

* **Display-based approach**: Hides and shows the elements using the `display` CSS property. This approach relies on the browser's layout engine to reflow and repaint the element when its display state changes.
* **Position-based approach**: Positions an element absolutely and then removes that positioning. This approach also involves reflowing and repainting the element.

**Pros and Cons**

Both approaches have their pros and cons:

* **Display-based approach**:
	+ Pros: Easier to implement, as it only requires modifying the `display` property of an element.
	+ Cons: Can lead to slower performance if the browser needs to reflow and repaint the entire element tree.
* **Position-based approach**:
	+ Pros: May be faster, as it avoids reflowing and repainting the entire element tree. However, this can also lead to more complex implementation.
	+ Cons: Requires positioning an element absolutely, which can add extra computation time.

**Libraries and Special JS Features**

In this benchmark, there is no specific library being used (e.g., jQuery), but the `document.createElement` method is used to create DOM elements. This is a standard JavaScript feature.

**Device Platform and Browser**

The latest benchmark result shows Chrome 95 running on a Windows Desktop platform. The test case uses the `RawUAString` field, which contains information about the browser's User Agent string (e.g., version number, platform).

**Other Alternatives**

To improve or modify this benchmark, you could consider:

* Adding more test cases to cover different scenarios, such as:
	+ Using CSS animations instead of display states.
	+ Incorporating other layout engines (e.g., Blink).
	+ Using JavaScript frameworks that optimize performance for DOM manipulation.
* Optimizing the script itself, such as reducing unnecessary computations or using caching mechanisms.
* Using a more efficient way to measure performance, like measuring the time it takes to render a single frame or performing micro-benchmarking with smaller datasets.

Keep in mind that benchmarking is an ongoing process, and results may vary depending on the specific hardware, software, and usage patterns.

Related benchmarks:

display vs position benchmark (version: 1)

Test

Comparing performance of: show hide by display vs show hide by position

Created: 4 years ago by: Registered User

Jump to the latest result

show hide by display

show hide by position

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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