Run results for: Check if is visible by classes vs style

Run details:

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

Browser: Chrome 68

Operating system: Windows

Device Platform: Desktop

Date tested: 6 years ago

Test name	Executions per second
Check by style property	8111928.0 Ops/sec
Check by classList	8286618.5 Ops/sec

HTML Preparation code:

<div class="not-visible" style="display:none"></div>
<div></div>
<div class="not-visible" style="display:none"></div>
<div></div>
<div class="not-visible" style="display:none"></div>
<div></div>
<div class="not-visible" style="display:none"></div>

Script Preparation code:

var nodes = document.querySelector('div');

Tests:

Check by style property
for(var n = 0; n < nodes.length; n++){ console.log(nodes[n].style.display == 'none') };
Check by classList
for(var n = 0; n < nodes.length; n++){ console.log(nodes[n].classList.contains('not-visible')) }

Run results for: Check if is visible by classes vs style

Measure the performance of check if an node is visible.

Check by style property

Check by classList