Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
cached getComputedStyle vs. getBoundingClientRect 442
(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">test</div>
Tests:
getComputedStyle
const elem = document.getElementById("foo"); var i = 5000; while (i--) { getHeight(); } function getHeight() { return parseFloat(getComputedStyle(elem).height); }
getBoundingClientRect
const elem = document.getElementById("foo"); var i = 5000; while (i--) { getHeight(); } function getHeight() { return elem.getBoundingClientRect().height; }
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:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=496162" width="100%" height="500px"></iframe>
getBoundingClientRect
320/s
getComputedStyle
167/s
View exact numbers
Test name
Executions per second
✓
getBoundingClientRect
320 Ops/sec
getComputedStyle
167 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided JSON benchmark. **Benchmark Overview** The test measures the performance difference between two methods to get the height of an HTML element: 1. `getComputedStyle(elem).height` 2. `elem.getBoundingClientRect().height` **Options Compared** Two options are compared: a. `getComputedStyle` method: * Uses the `getComputedStyle()` function to dynamically compute the CSS styles of an element. * Returns the computed style value for a specific property (in this case, `height`). * Can be slower due to the additional computation and parsing required. b. `getBoundingClientRect` method: * Uses the `getBoundingClientRect()` method to get the size of an element relative to its nearest positioned ancestor. * Returns the bounding rectangle's properties (x, y, width, height) for the given element. * Typically faster since it only returns a single value (the height in this case). **Pros and Cons** a. `getComputedStyle` method: Pros: * More explicit control over CSS styles * Allows for more advanced styling and layout calculations Cons: * Slower due to additional computation and parsing required * May be less suitable for performance-critical applications b. `getBoundingClientRect` method: Pros: * Faster since it only returns a single value (the height) * More straightforward to implement, as it's a built-in DOM method Cons: * Less explicit control over CSS styles * May not work as expected in certain edge cases (e.g., when the element is floated or has complex layout) **Library and Special JS Features** In this benchmark, no specific libraries are used beyond the standard JavaScript DOM API. However, it's worth noting that `getComputedStyle` relies on the CSSOM (CSS Object Model) specification, which can provide additional features for working with styles. The use of `getBoundingClientRect` is a standard DOM method in modern browsers. **Other Alternatives** If you need to measure the performance difference between these two methods, you could also consider using: * `document.documentElement.style.top` and `elem.offsetTop` (using absolute positioning) * `elem.offsetWidth` and `elem.offsetHeight` (using width and height properties) Keep in mind that these alternatives may have different pros and cons compared to the `getComputedStyle` and `getBoundingClientRect` methods. **Benchmark Preparation Code** The provided HTML preparation code is: ```html <div id="foo">test</div> ``` This creates a simple HTML element with an ID of "foo", which is used as the test subject in both benchmark cases.
Related benchmarks
window.getComputedStyle vs. getBoundingClientRect
window.getComputedStyle vs. getBoundingClientRect vs. window.getComputedStyle without getters
offsetwidth vs getBoundingClientRect
getComputedStyle vs getBoundingClientRect
window.getComputedStyle vs. getBoundingClientRect width
Comments
Confirm delete:
Do you really want to delete benchmark?