Benchmark: clientWidth vs offsetWidth vs window.getComputedStyle vs getBoundingClientRect

HTML Preparation code:

<div id="teste">teste</div>

Script Preparation code:

var teste_n = '123px';
var _style = window.getComputedStyle(document.getElementById('teste'));
var el = document.getElementById('teste');

Tests:

clientWidth
document.getElementById('teste').clientWidth;
offsetwidth
document.getElementById('teste').offsetwidth;
window.getComputedStyle
parseFloat(_style['width'])
BoundingClientRect
el.getBoundingClientRect()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth
offsetwidth
window.getComputedStyle
BoundingClientRect

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/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientWidth	1829593.9 Ops/sec
offsetwidth	9064632.0 Ops/sec
window.getComputedStyle	1170574.9 Ops/sec
BoundingClientRect	1549144.4 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 5 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**What is being tested?**

The benchmark compares four different methods to get the width of an HTML element:

1. `clientWidth`
2. `offsetwidth` (Note: There is no such property as "offsetwidth". I assume it's a typo, and it should be `offsetWidth`)
3. `window.getComputedStyle` with parsing its result
4. `getBoundingClientRect`

**What options are compared?**

These four methods are being compared to determine which one is the fastest (measured in executions per second) on a specific browser and device platform.

**Pros/Cons of each approach:**

1. **clientWidth**: This method returns the width of an element's content area, excluding padding and borders. It's fast because it's a direct property access.
	* Pros: Fast, simple to use
	* Cons: Doesn't include padding and borders in its calculation
2. **offsetWidth**: This method returns the total width of an element, including its content, padding, and borders.
	* Pros: Includes all dimensions in its calculation
	* Cons: Not directly comparable to clientWidth (since it includes more)
3. **window.getComputedStyle**: This method returns a CSSStyleDeclaration object containing the styles applied to an element.
	* Pros: Can return multiple style properties at once, useful for other tasks
	* Cons: More complex and slower than direct property access
4. **getBoundingClientRect**: This method returns the position and dimensions of an element relative to its parent.
	* Pros: Includes all dimensions in its calculation, easy to use with other positioning-related calculations
	* Cons: Not as fast as clientWidth or offsetWidth

**Library and special JS features/syntax:**

None are used in this benchmark.

**Other considerations:**

When choosing between these methods, consider the following:

* If you only need the content width (excluding padding and borders), use `clientWidth`.
* If you need to include all dimensions (content, padding, and borders), use `offsetWidth` or `getBoundingClientRect`.
* If you need to access other style properties besides width, use `window.getComputedStyle`.

**Other alternatives:**

You can also consider using CSS's `width` property directly on the element, which can be faster than accessing the computed styles.

In summary, this benchmark compares four methods to get the width of an HTML element and helps determine which one is the fastest for a specific browser and device platform.

Related benchmarks:

clientWidth vs offsetWidth vs window.getComputedStyle vs getBoundingClientRect (version: 0)

Comparing performance of: clientWidth vs offsetwidth vs window.getComputedStyle vs BoundingClientRect

Created: 2 years ago by: Guest

Jump to the latest result

clientWidth

offsetwidth

window.getComputedStyle

BoundingClientRect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 5 months ago):