Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
offsetwidth/getBoundingClientRect
(version: 0)
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().width;
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:
9 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Browser/OS:
Chrome 141 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619596" width="100%" height="500px"></iframe>
offsetwidth
41.1M/s
getBoundingClientRect
2.1M/s
View exact numbers
Test name
Executions per second
✓
offsetwidth
41,103,724 Ops/sec
getBoundingClientRect
2,104,316 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark. **What is being tested?** The provided JSON represents two individual test cases, each testing a specific JavaScript property: 1. `offsetwidth` (also known as `offsetWidth`) 2. `getBoundingClientRect` These properties relate to the dimensions of HTML elements on a web page. **Options compared:** In this benchmark, we have only two options being compared: a. Using `document.getElementById('test').offsetWidth` b. Using `document.getElementById('test').getBoundingClientRect().width` Let's examine both approaches: **Approach 1: `offsetWidth`** * **Pros:** + Faster execution time (due to fewer DOM interactions) + Less overhead for getting the element's width * **Cons:** + Might not be supported by older browsers or versions of Internet Explorer + Requires an element with a style attribute set **Approach 2: `getBoundingClientRect().width`** * **Pros:** + More widely supported across modern browsers and devices + Allows for more flexibility in getting the element's width (e.g., including padding and border) * **Cons:** + Slower execution time due to additional DOM interactions + More overhead for getting the element's width **Library usage** In this benchmark, no libraries are explicitly mentioned or used. **Special JS feature/syntax** There is no special JavaScript feature or syntax being tested in this benchmark. Both approaches rely on standard JavaScript methods for accessing HTML elements' properties. **Other alternatives** While not directly related to the specific test cases, other alternatives for measuring element dimensions might include: * Using CSS properties (e.g., `width` or `margin`) directly * Utilizing web APIs like `window.getComputedStyle()` (similar to Approach 1) * Leveraging libraries like jQuery or a similar DOM manipulation framework In conclusion, MeasureThat.net is testing the performance difference between two common approaches for accessing an HTML element's width: using `offsetWidth` and `getBoundingClientRect().width`. The benchmark highlights the trade-offs between speed, support, and overhead associated with each method.
Related benchmarks
clientWidth vs offsetWidth vs window.getComputedStyle
offsetwidth vs getBoundingClientRect
Comments
Confirm delete:
Do you really want to delete benchmark?