Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
window.getComputedStyle vs getAttribute
(version: 0)
Comparing performance of:
getComputedStyle vs getAttribute
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" data-attr="foo"></div>
Tests:
getComputedStyle
var i = 3000; while (i--) { chekele('foo'); } function chekele(element) { return window.getComputedStyle(document.getElementById(element), null).getPropertyValue("display").indexOf('none') === -1; }
getAttribute
var i = 3000; while (i--) { chekele('foo'); } function chekele(element) { return document.getElementById(element).getAttribute('data-attr'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
getComputedStyle
getAttribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Browser/OS:
Chrome 140 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=617619" width="100%" height="500px"></iframe>
getAttribute
3K/s
getComputedStyle
458/s
View exact numbers
Test name
Executions per second
✓
getAttribute
3,229 Ops/sec
getComputedStyle
458 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The benchmark is comparing two approaches to check if an element with a specific attribute exists: `window.getComputedStyle` and `getAttribute`. The test case uses a simple HTML page with a single `<div>` element having a `data-attr` attribute set to "foo". **Options Compared** There are two options being compared: 1. **`window.getComputedStyle`**: This method retrieves the computed style of an element, including its display property. In this case, it checks if the `display` property is not equal to `'none'`, which would indicate that the element exists. 2. **`getAttribute`**: This method returns the value of a specific attribute on an element. In this case, it retrieves the value of the `data-attr` attribute. **Pros and Cons** * **`window.getComputedStyle`**: + Pros: Can be useful for checking complex styles or properties that aren't easily accessible through attributes. + Cons: Requires accessing the DOM tree, which can be slower than direct attribute access. * **`getAttribute`**: + Pros: Faster and more lightweight, as it only accesses the element's attributes directly. + Cons: May not work for elements without the specified attribute or for attributes that are not present. **Library Usage** There is no explicit library usage in this benchmark. However, `window.getComputedStyle` relies on the Web API to access the DOM tree and retrieve computed styles. **Special JS Features/Syntax** None of the provided test cases use any special JavaScript features or syntax. They are straightforward and focus on comparing two basic approaches. **Alternatives** Other alternatives for checking element existence could include: * Using `element.matches()` with a CSS selector * Implementing a custom function to check attribute presence (e.g., using a regex) * Utilizing a library like jQuery or Lodash, which provide more convenient ways to work with elements and attributes. Keep in mind that the choice of approach depends on the specific use case and performance requirements.
Related benchmarks
jquery.css vs getComputedStyle
clientHeight vs getComputedStyle().height
computedStyleMap vs getComputedStyle
window.getComputedStyle vs. getBoundingClientRect width
Comments
Confirm delete:
Do you really want to delete benchmark?