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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 7 years ago by: Guest

Jump to the latest result

Check by style property

Check by classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):