Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
clientWidth vs offsetWidth vs style.width
(version: 1)
Comparing performance of:
clientWidth vs offsetwidth vs style.width
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="teste" style="width:100px;">teste</div>
Tests:
clientWidth
document.getElementById('teste').clientWidth;
offsetwidth
document.getElementById('teste').offsetwidth;
style.width
document.getElementById('teste').style.width;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
clientWidth
offsetwidth
style.width
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15
Browser/OS:
Safari 26 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=628519" width="100%" height="500px"></iframe>
offsetwidth
66.5M/s
style.width
33.5M/s
clientWidth
10.7M/s
View exact numbers
Test name
Executions per second
✓
offsetwidth
66,549,080 Ops/sec
style.width
33,539,914 Ops/sec
clientWidth
10,734,711 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
This benchmark focuses on comparing three different methods of obtaining the width of a DOM element in JavaScript. Specifically, it evaluates: 1. **clientWidth**: - **Benchmark Definition**: `document.getElementById('teste').clientWidth;` - **Description**: This property returns the inner width of an element in pixels, including padding but excluding borders, scrollbars, and margins. It reflects the layout dimensions of the element as seen in the browser. 2. **offsetWidth**: - **Benchmark Definition**: `document.getElementById('teste').offsetwidth;` - **Description**: The `offsetWidth` property provides the layout width of an element, including padding, borders, and scrollbars, but not margins. It represents the total visual size of the element as rendered on the screen. 3. **style.width**: - **Benchmark Definition**: `document.getElementById('teste').style.width;` - **Description**: This property retrieves the inline CSS width of an element. If the width is not set directly in the element's style attribute, this value will return an empty string. ### Test Results and Performance From the benchmark results, we can observe the following execution rates for each method: - **offsetWidth**: **22,319,760 executions per second** - **style.width**: **3,441,898.75 executions per second** - **clientWidth**: **1,053,460.75 executions per second** ### Pros and Cons of Each Approach 1. **clientWidth**: - **Pros**: - Directly related to how the element displays, which can be useful for layout management. - Automatically updates when the content's layout changes. - **Cons**: - Limited to padding; may not represent the actual size including other visual dimensions (like borders). 2. **offsetWidth**: - **Pros**: - Provides a complete representation of the element's width as rendered on the page. - Most efficient in terms of performance based on benchmark results, making it the quickest option for obtaining width. - **Cons**: - Includes borders and scrollbars, which might not always be desirable for layout calculations. 3. **style.width**: - **Pros**: - Direct access to the specified width property allows for retrieval of design-time configurations. - **Cons**: - Only returns the value if it is set inline; does not account for CSS rules applied externally (e.g., through stylesheets). - Lowest performance based on the test, meaning it is less efficient for frequent access. ### Other Considerations - **Use Cases**: Selection among these properties depends on what aspect of the element’s width is most relevant for the task at hand. For dynamic layouts where borders matter, `offsetWidth` may be best. For responsive designs focusing merely on content space, `clientWidth` can be more appropriate. - **Alternatives**: In addition to these properties, there are also utility functions and libraries (like jQuery) that can abstract these differences and provide a more streamlined way of getting width. They can handle cross-browser compatibility automatically but may incur additional overhead. In summary, the benchmark clearly illustrates that `offsetWidth` is the most performant choice for obtaining the width of an element in this context, with `clientWidth` and `style.width` serving specific needs that may be more relevant depending on the scenario. Choosing the right approach among them depends on the specific requirements of the application in question, including considerations for layout dynamics and performance needs.
Related benchmarks
clientHeight vs offsetHeight vs window.getComputedStyle
clientWidth vs offsetWidth vs window.getComputedStyle
offsetwidth vs getBoundingClientRect
offsetwidth/getBoundingClientRect
clientWidth vs offsetWidth vs window.getComputedStyle v2
clientHeight vs offsetHeight vs getBoundingClientRect().height
Comments
Confirm delete:
Do you really want to delete benchmark?