Benchmark: clientWidth vs offsetWidth vs window.getComputedStyle v2

HTML Preparation code:

<div id="teste" style="width: 123px">teste</div>

Tests:

clientWidth
document.getElementById('teste').clientWidth;
offsetwidth
document.getElementById('teste').offsetwidth;
window.getComputedStyle
parseFloat(window.getComputedStyle(document.getElementById('teste')).width)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth
offsetwidth
window.getComputedStyle

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days ago):

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a web-based platform for creating and running JavaScript microbenchmarks. The provided benchmark tests the performance of three methods to retrieve the width of an HTML element: `clientWidth`, `offsetWidth`, and `window.getComputedStyle`. We'll dive into each test case, discuss the pros and cons of different approaches, and explore any notable libraries or features used in the benchmark.

**Test Cases**

The benchmark consists of three individual test cases:

1. **clientWidth**
```javascript
document.getElementById('teste').clientWidth;
```
This test case measures the performance of retrieving the client width of an HTML element using the `clientWidth` property.

2. **offsetWidth**
```javascript
document.getElementById('teste').offsetwidth;
```
This test case measures the performance of retrieving the offset width of an HTML element using the `offsetWidth` property.

3. **window.getComputedStyle**
```javascript
parseFloat(window.getComputedStyle(document.getElementById('teste')).width);
```
This test case measures the performance of retrieving the width of an HTML element using the `getComputedStyle` method and parsing its value as a float.

**Options Compared**

The three test cases compare the following options:

* **clientWidth**: Retrieves the client width of an HTML element, which includes only the content's own width.
* **offsetWidth**: Retrieves the offset width of an HTML element, which includes the content's own width and any additional padding, border, or margin applied to the element.
* **window.getComputedStyle**: Retrieves the computed style of an HTML element, which returns a CSSOMStyle object that can be used to access various style properties.

**Pros and Cons**

Here are some pros and cons for each approach:

* **clientWidth**:
	+ Pros: Simple and efficient, as it only requires accessing a single property.
	+ Cons: May not account for additional styling applied to the element.
* **offsetWidth**:
	+ Pros: Includes the content's own width and any additional padding, border, or margin applied to the element.
	+ Cons: More computationally expensive than `clientWidth`, as it requires accessing multiple properties.
* **window.getComputedStyle**:
	+ Pros: Provides more precise control over styling, as it returns a CSSOMStyle object that can be used to access various style properties.
	+ Cons: Requires parsing the parsed value of the width property, which may introduce additional overhead.

**Library and Features**

None of the test cases use any notable libraries or features beyond JavaScript's built-in DOM APIs. However, `window.getComputedStyle` relies on the CSSOM (CSS Object Model) API, which is a standard for accessing and manipulating CSS styles in web browsers.

**Special JS Feature or Syntax**

There are no special JS features or syntax used in this benchmark beyond JavaScript's built-in DOM APIs and CSSOM API.

**Other Alternatives**

If you're looking for alternatives to these test cases, consider the following:

* For retrieving an element's width without using `clientWidth` or `offsetWidth`, you could use `getBoundingClientRect()` or `scrollWidth`.
* If you need more precise control over styling, you could use a CSS library like Sass or Less.
* To measure the performance of different styling approaches, consider creating additional test cases for various CSS-related operations.

In conclusion, this benchmark provides a useful comparison of three methods to retrieve an HTML element's width: `clientWidth`, `offsetWidth`, and `window.getComputedStyle`. Understanding the pros and cons of each approach can help developers make informed decisions about their own code.

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientWidth	2434950.5 Ops/sec
offsetwidth	11214287.0 Ops/sec
window.getComputedStyle	1041926.8 Ops/sec

Related benchmarks:

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

Comparing performance of: clientWidth vs offsetwidth vs window.getComputedStyle

Created: one year ago by: Guest

Jump to the latest result

clientWidth

offsetwidth

window.getComputedStyle

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days ago):