Benchmark: Toggle hidden attribute vs toggle display:none / visibility:hidden styles

HTML Preparation code:

<div id='toggle-visibility-here'>
  <div>children</div>
</div>

Tests:

Attribute
const element = document.getElementById('toggle-visibility-here'); element.hidden = !element.hidden;
modify styles - visibility hidden
const element = document.getElementById('toggle-visibility-here'); element.style.visibility = element.style.visibility==='hidden' ? 'visible' : 'hidden';
modify style display none
const element = document.getElementById('toggle-visibility-here'); element.style.display = element.style.display==='none' ? 'initial' : 'none';

Rendered benchmark preparation results:

Previous results

Test case name	Result
Attribute
modify styles - visibility hidden
modify style display none

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 28 days ago)

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

Browser/OS: Chrome 123 on Windows

Test name	Executions per second
Attribute	2397948.0 Ops/sec
modify styles - visibility hidden	901951.3 Ops/sec
modify style display none	663470.6 Ops/sec

Toggle hidden attribute vs toggle display:none / visibility:hidden styles (version: 0)