Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
getComputedStyle vs. className vs. className / contains
(version: 0)
Comparing performance of:
getComputedStyle vs className vs classList.contains
Created:
7 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo"></div>
Tests:
getComputedStyle
var i = 3000; var el = document.getElementById('foo'); while (i--) { chekele(el); } function chekele(element) { return window.getComputedStyle(element, null).getPropertyValue("display").indexOf('none') === -1; }
className
var i = 3000; var el = document.getElementById('foo'); while (i--) { chekele(el); } function chekele(element) { return element.className.indexOf('hide') === -1; }
classList.contains
var i = 3000; var el = document.getElementById('foo'); while (i--) { chekele(el); } function chekele(element) { return element.classList.contains('hide'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
getComputedStyle
className
classList.contains
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Browser/OS:
Chrome 133 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=591013" width="100%" height="500px"></iframe>
className
20K/s
classList.contains
6K/s
getComputedStyle
473/s
View exact numbers
Test name
Executions per second
✓
className
19,526 Ops/sec
classList.contains
6,104 Ops/sec
getComputedStyle
473 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the benchmark. **Benchmark Overview** The provided benchmark measures the performance of three different approaches to check if an element has a `display` property set to `none`: 1. Using `getComputedStyle(element, null).getPropertyValue("display").indexOf('none') === -1` 2. Using `element.className.indexOf('hide') === -1` 3. Using `element.classList.contains('hide')` **Approach 1: getComputedStyle** This approach uses the `window.getComputedStyle` function to retrieve the computed style of an element, specifically the `display` property value. The `indexOf` method is then used to check if `'none'` is present in the value. Pros: * This approach is more accurate because it checks for the exact value of the `display` property. * It's a standard JavaScript function that doesn't require any additional libraries. Cons: * This approach can be slower due to the overhead of using a function call and accessing the DOM. * The performance difference between this and other approaches may not be noticeable in modern browsers, but it's still worth considering. **Approach 2: className** This approach uses the `className` property of an element to check if `'hide'` is present. The `indexOf` method is used to find the presence of `'hide'`. Pros: * This approach is faster because it only requires accessing a single property and performing a simple string search. * It's also a standard JavaScript function that doesn't require any additional libraries. Cons: * This approach can be less accurate because it only checks for the presence of `'hide'` in the class list, not the exact value of the `display` property. * It may not work as expected if the element has multiple classes with different values (e.g., `.class1.hide`). **Approach 3: classList.contains** This approach uses the `classList.contains()` method to check if `'hide'` is present in the class list of an element. Pros: * This approach is faster and more accurate than using `className` because it's designed specifically for checking class presence. * It's a modern JavaScript function that's supported in most browsers. Cons: * This approach requires the use of the `classList` property, which may not be supported in older browsers or in certain environments (e.g., Internet Explorer). **Library Used** None of these approaches require any additional libraries beyond standard JavaScript functions. However, if you're using a library like jQuery, you might need to consider its performance impact on your benchmark. **Special JS Feature/Syntax** None of these approaches rely on any special JavaScript features or syntax that would affect their behavior or performance. **Alternatives** If you want to explore alternative approaches, here are a few options: * Using `document.querySelector` and accessing the `style` attribute directly (which might be slower than using `getComputedStyle`) * Using CSS APIs like `window.CSS` (if available in your browser) * Optimizing the benchmark for specific use cases or requirements Keep in mind that these alternatives may not offer significant performance improvements over the original three approaches.
Related benchmarks
hasAttribute vs. getAttribute vs. classList.contains
querySelector(class) vs classList.contains
DataAttribute vs Class Selector on body
querySelector vs classList.contains
Comments
Confirm delete:
Do you really want to delete benchmark?