Benchmark: clientWidth vs offsetWidth vs window.getComputedStyle

HTML Preparation code:

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

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 26 runs

offsetwidth

8.7M/s

clientWidth

1.1M/s

window.getComputedStyle

575K/s

Fastest: offsetwidth (15.0x faster)

View exact numbers

✓ offsetwidth: 8,653,002 ops/sec
• clientWidth: 1,096,475 ops/sec
• window.getComputedStyle: 575,297 ops/sec

Firefox 7 runs

offsetwidth

5.2M/s

clientWidth

3.5M/s

window.getComputedStyle

2.2M/s

Fastest: offsetwidth (2.3x faster)

View exact numbers

✓ offsetwidth: 5,157,514 ops/sec
• clientWidth: 3,455,804 ops/sec
• window.getComputedStyle: 2,213,740 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 141 on Android

View result in a separate tab

offsetwidth

10.9M/s

clientWidth

160K/s

window.getComputedStyle

91K/s

View exact numbers

Test name	Executions per second
✓ offsetwidth	10,946,994 Ops/sec
clientWidth	160,427 Ops/sec
window.getComputedStyle	90,757 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark definition consists of three test cases:

1. `document.getElementById('teste').clientWidth;`
2. `document.getElementById('teste').offsetWidth;`
3. `parseFloat(window.getComputedStyle(document.getElementById('teste')).width);`

These test cases measure the performance of accessing different properties related to a DOM element's size.

**Options Compared**

The benchmark is comparing three options:

1. `clientWidth`: The client width property returns the width of an element, including padding and border.
2. `offsetWidth`: The offset width property returns the total width of an element, including content, padding, border, margin, and scrolling positions.
3. `window.getComputedStyle(document.getElementById('teste')).width;` : This option uses the Web API to get the computed style of the element's width.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **clientWidth**: Pros: Simple, easy to understand. Cons:
	* May not account for padding, border, or other layout boxes.
	* May be slower due to unnecessary calculations.
2. **offsetWidth**: Pros: More accurate, as it includes content, padding, and borders. Cons:
	* Can be slower due to the need to consider all these factors.
3. **window.getComputedStyle**: Pros: More accurate, as it returns the exact computed style of the element. Cons:
	* May be slower due to the overhead of the Web API.
	* Requires more computation and parsing.

**Library and Purpose**

The `window.getComputedStyle` function uses the Web APIs for getting the computed style of an element. The purpose is to accurately retrieve the current styles applied to an element, including any layout adjustments.

**Special JS Feature or Syntax**

There isn't a special JavaScript feature or syntax used in this benchmark. However, it's worth noting that `window.getComputedStyle` uses a proprietary Web API, which might not be supported by older browsers.

**Other Alternatives**

If you want to explore alternative approaches, here are a few options:

1. **CSSOM**: The CSS Object Model (CSSOM) provides a more modern and efficient way of accessing the computed styles of an element.
2. **DOM APIs with computed properties**: Some DOM APIs provide computed properties that can be used to access the styles of an element, such as `getComputedStyle` for the browser's default styling or `style` property for specific elements.

Keep in mind that each alternative has its own pros and cons, and might not match the exact requirements of your use case.

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

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

Created: 7 years ago by: Registered User

Go to the latest result

clientWidth

offsetwidth

window.getComputedStyle

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 26 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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

Comparing performance of: clientWidth vs offsetwidth vs window.getComputedStyle

Created: 7 years ago by: Registered User

Go to the latest result

clientWidth

offsetwidth

window.getComputedStyle

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 26 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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