Benchmark: Check if is visible by classes vs style

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')) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Check by style property
Check by classList

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark is comparing two approaches to check if an HTML element is visible:

1. **Check by style property**: This approach uses the `style.display` property to determine if an element is visible. The code checks each element's `display` property, which can have values like `'none'`, `'block'`, or `'inline'`.
2. **Check by classList**: This approach uses the `classList` property of an HTML element to check if it has a specific class (in this case, `"not-visible"`).

**Pros and Cons**

1. **Check by style property**:
	* Pros: Simple, lightweight, and fast.
	* Cons: May not be accurate for all cases, especially when dealing with complex CSS rules or animations that affect `display`.
2. **Check by classList**:
	* Pros: More robust and flexible than checking `style.display`, as it can account for multiple classes and their interactions.
	* Cons: May be slower due to the additional complexity of iterating over classes.

**Library/Features Used**

The benchmark uses the following JavaScript features:

1. **`classList` property**: This is a standard HTML5 feature that allows accessing an element's class list as a `DOMTokenList`.
2. No special JavaScript features or syntax are used in this benchmark.

**Other Alternatives**

Other approaches to check if an HTML element is visible could include:

1. Using the `getComputedStyle()` method to access the computed style of an element, which can provide more information about its visual state.
2. Implementing a custom solution using CSS selectors or regex patterns to extract visible elements from the DOM.

However, these alternatives are not used in this benchmark, so they are not relevant for comparison.

**Benchmark Preparation Code**

The script preparation code creates a variable `nodes` with an array of five HTML elements:
```javascript
var nodes = document.querySelector('div');
```
This line is executed before each test case to set up the context.

**Individual Test Cases**

Each test case consists of a single benchmark definition that runs a loop over the `nodes` array and performs one of two operations:

1. **Check by style property**: Iterates over the elements, logs whether their `style.display` property is `'none'`.
2. **Check by classList**: Iterates over the elements, logs whether they have the `"not-visible"` class.

These test cases are designed to measure the performance difference between these two approaches for checking element visibility.

Latest run results:

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

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/OS: Chrome 68 on Windows

View result in a separate tab

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

Related benchmarks:

Check if is visible by classes vs style (version: 0)

Measure the performance of check if an node is visible.

Comparing performance of: Check by style property vs Check by classList

Created: 6 years ago by: Guest

Jump to the latest result

Check by style property

Check by classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):