Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
offsetwidth vs getBoundingClientRect
(version: 0)
Comparing performance of: offsetwidth vs getBoundingClientRect
Comparing performance of:
offsetwidth vs getBoundingClientRect
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test">test</div>
Script Preparation code:
var test_n = '123px'; var _style = window.getComputedStyle(document.getElementById('test'));
Tests:
offsetwidth
document.getElementById('test').offsetwidth;
getBoundingClientRect
document.getElementById('test').getBoundingClientRect;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
offsetwidth
getBoundingClientRect
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Browser/OS:
Chrome 133 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=584890" width="100%" height="500px"></iframe>
getBoundingClientRect
22.8M/s
offsetwidth
22.3M/s
View exact numbers
Test name
Executions per second
✓
getBoundingClientRect
22,775,594 Ops/sec
offsetwidth
22,256,518 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks! **Benchmark Definition:** The benchmark compares the performance of two methods to measure the width of an element: `offsetWidth` and `getBoundingClientRect`. The goal is to determine which method is faster. **Options Compared:** Two options are being compared: 1. **offsetWidth**: This method returns the width of an element in pixels, but it requires a separate DOM query to access the element's style (using `window.getComputedStyle(document.getElementById('test'))`). This approach can be slower because it involves an additional DOM lookup. 2. **getBoundingClientRect**: This method returns the bounding rectangle of an element, which includes its width. It is generally considered faster than `offsetWidth` because it only requires a single DOM query to access the element's style. **Pros and Cons:** * **offsetWidth**: + Pros: Can be useful in situations where you need to measure an element's width without relying on the layout, but this approach can add overhead due to the additional DOM query. + Cons: Can be slower than `getBoundingClientRect` because it involves two steps (DOM lookup and style access). * **getBoundingClientRect**: + Pros: Generally faster than `offsetWidth` since it only requires a single DOM query. It also provides more information about the element's bounding rectangle, including its width. + Cons: May not be suitable for situations where you need to measure an element's width without relying on the layout. **Library and Its Purpose:** In this benchmark, the `window.getComputedStyle` function is used to access the style of an element. This library provides a way to retrieve an element's computed styles (e.g., position, width, height) in a single step. **Special JS Feature or Syntax:** There are no special JavaScript features or syntax being tested or utilized in this benchmark. **Other Alternatives:** If you need to measure the width of an element, other alternatives to `offsetWidth` and `getBoundingClientRect` include: 1. **clientWidth**: Similar to `offsetWidth`, but only returns the width of the content within the element's border, not including padding or margin. 2. **scrollWidth**: Returns the total width of an element when it is scrolled to its maximum extent. 3. **width` property: Some browsers (e.g., Edge) provide a `width` property on the element object itself, which can be used to measure the element's width. Keep in mind that each approach has its pros and cons, and the choice ultimately depends on your specific use case and performance requirements.
Related benchmarks
clientWidth vs offsetWidth vs window.getComputedStyle
clientWidth vs offsetWidth vs window.getComputedStyle v2
Comments
Confirm delete:
Do you really want to delete benchmark?