MeasureThat.net

Run results for: display vs position benchmark

Test

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
Chrome 95
Windows
Desktop
3 years ago
Test name Executions per second
show hide by display 289.4 Ops/sec
show hide by position 278.0 Ops/sec
HTML Preparation code:
AخA
 
1
<style type="text/css">
2
    .hide {
3
        display: none;
4
    }
5
    .pos {position: absolute !important;
6
       top: -9999px !important;
7
       left: -9999px !important;
8
      }
9
10
</style>
11
<div id="container"></div>
Script Preparation code:
​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");
    }

  • show hide by position

     
    let i = 3000;
    while (i--) {
        item.classList.add("pos");
        item.classList.remove("pos");
    }