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>

AخA
 
<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)
}

​x
 
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"); }
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"); }
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Browser/OS: Chrome 95 on Windows

View result in a separate tab

Test name	Executions per second
show hide by display	289.4 Ops/sec
show hide by position	278.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

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:

Display-based approach: The test case uses the display CSS property to hide and show the elements.
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.

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: 3 years ago by: Registered User

Jump to the latest result

show hide by display

show hide by position

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):