Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
getComputedStyle vs getBoundingClientRect
(version: 0)
Comparing performance of:
getComputedStyle vs getBoundingClientRect
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" style="width: 100px; height: 100px"></div>
Script Preparation code:
var foo = document.querySelector('#foo');
Tests:
getComputedStyle
var { height } = parseInt(getComputedStyle(foo));
getBoundingClientRect
var { height } = foo.getBoundingClientRect();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
getComputedStyle
getBoundingClientRect
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Browser/OS:
Chrome 146 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626796" width="100%" height="500px"></iframe>
getComputedStyle
5.7M/s
getBoundingClientRect
2.5M/s
View exact numbers
Test name
Executions per second
✓
getComputedStyle
5,731,164 Ops/sec
getBoundingClientRect
2,454,699 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The provided benchmark measures the performance difference between two ways to access an element's size: `getComputedStyle` and `getBoundingClientRect`. Let's dive into the details. **Options being compared:** 1. **getComputedStyle**: This method retrieves the computed style of an element as a CSSStyleDeclaration object, which includes properties like width, height, etc. 2. **getBoundingClientRect**: This method returns the size of an element in pixels (i.e., width and height), relative to the element's viewport. **Pros and Cons:** * `getComputedStyle` is generally slower than `getBoundingClientRect` because it: + Involves parsing CSS rules, which can be time-consuming. + May require additional DOM lookups (e.g., to get the style attribute). * `getBoundingClientRect`, on the other hand, is faster since: + It only returns a simple size value without needing to parse CSS rules or perform additional DOM lookups. However, `getComputedStyle` can be more useful in certain situations: * When you need to retrieve specific styles (e.g., border-radius, font-size) beyond just width and height. * When working with styles that are not directly applicable to the element's size (e.g., transform properties). **Library usage:** There is no explicit library mentioned in this benchmark. However, `getComputedStyle` relies on the `window.getComputedStyle()` function or `document.defaultView.getComputedStyle()`, which is part of the DOM API. **Special JS feature/syntax:** None explicitly mentioned. The code uses standard JavaScript syntax and doesn't rely on any specific features like ES6 classes, async/await, or promises. **Other alternatives:** If you need to measure performance differences between similar methods (e.g., other approaches to get an element's size), consider using: * `getCSSLength()`: This method returns the length of a CSS property value as a number. It's faster than `getComputedStyle`, but still slower than `getBoundingClientRect`. * `offsetWidth`/`offsetHeight`: These methods return the width and height of an element, respectively, by taking into account padding and border widths. * `clientWidth`/`clientHeight`: These methods return the width and height of an element's content area. Keep in mind that each approach has its trade-offs, so choose the one that best fits your specific use case.
Related benchmarks
toFixed() vs Math.round().toString()
parseFloat(toFixed) vs Math.round()
queryselector vs getelementbyid with classes and ids
getAttribute vs dataset gregdaynes destructure multiple getAttribute
Comments
Confirm delete:
Do you really want to delete benchmark?