Benchmark: clientWidth / clientHeight vs. getBoundingClientRect() vs. getComputedStyle

clientWidth / clientHeight vs. getBoundingClientRect() vs. getComputedStyle (version: 0)

Comparing performance of: `clientWidth / clientHeight (destructured and renamed) vs clientWidth / clientHeight (destructured) vs clientWidth / clientHeight (simple property access) vs getBoundingClientRect() (destructured) vs getBoundingClientRect() (simple property access) vs getComputedStyle`

Created: 3 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<div id="el">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Script Preparation code:

var el = document.getElementById("el");

Tests:

clientWidth / clientHeight (destructured and renamed)
const { clientWidth: width, clientHeight: height } = el; const perim = (width + height) * 2;
clientWidth / clientHeight (destructured)
const { clientWidth, clientHeight } = el; const perim = (clientWidth + clientHeight) * 2;
clientWidth / clientHeight (simple property access)
const width = el.clientWidth; const height = el.clientHeight; const perim = (width + height) * 2;
getBoundingClientRect() (destructured)
const { width, height } = el.getBoundingClientRect(); const perim = (width + height) * 2;
getBoundingClientRect() (simple property access)
const rect = el.getBoundingClientRect(); const width = rect.width; const height = rect.height; const perim = (width + height) * 2;
getComputedStyle
const { height, width } = getComputedStyle(el); const perim = (width + height) * 2;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth / clientHeight (destructured and renamed)
clientWidth / clientHeight (destructured)
clientWidth / clientHeight (simple property access)
getBoundingClientRect() (destructured)
getBoundingClientRect() (simple property access)
getComputedStyle

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

getBoundingClientRect() (simple property access)

2.3M/s

getBoundingClientRect() (destructured)

2.2M/s

clientWidth / clientHeight (destructured)

1.8M/s

clientWidth / clientHeight (simple property access)

1.7M/s

clientWidth / clientHeight (destructured and renamed)

1.7M/s

getComputedStyle

837K/s

View exact numbers

Test name	Executions per second
✓ getBoundingClientRect() (simple property access)	2,288,414 Ops/sec
getBoundingClientRect() (destructured)	2,246,912 Ops/sec
clientWidth / clientHeight (destructured)	1,764,759 Ops/sec
clientWidth / clientHeight (simple property access)	1,743,219 Ops/sec
clientWidth / clientHeight (destructured and renamed)	1,742,590 Ops/sec
getComputedStyle	837,060 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. In this case, we have a benchmark that compares the performance of three different approaches for calculating the perimeter of an HTML element's bounding box.

**Benchmark Test Cases**

The test cases are designed to compare the following three approaches:

1. **Simple Property Access**: Directly accessing the `clientWidth` and `clientHeight` properties of the element.
2. **Destructured Approach**: Using destructuring assignment to extract the width and height from the element's bounding box (via `getBoundingClientRect()`).
3. **getComputedStyle**: Using the `getComputedStyle` method to get the styles of the element, which includes the computed values for `clientWidth` and `clientHeight`.

**Pros and Cons of Each Approach**

1. **Simple Property Access**:
	* Pros: Simple and straightforward, easy to understand.
	* Cons: May not be as efficient or accurate, especially if the element's size is not fixed.
2. **Destructured Approach**:
	* Pros: Efficient and accurate, reduces overhead by avoiding unnecessary method calls.
	* Cons: Requires two additional method calls (`getBoundingClientRect()` and destructuring assignment), which may incur some performance overhead.
3. **getComputedStyle**:
	* Pros: Most accurate and efficient approach, as it retrieves the computed styles directly from the browser's rendering engine.
	* Cons: May be slower due to the additional overhead of retrieving styles via `getComputedStyle`, especially if the element's size is not fixed.

**Other Considerations**

1. **Browser Variability**: The benchmark results may vary across different browsers and platforms, which could affect the performance differences between these approaches.
2. **Element Size and Position**: The performance differences between these approaches may be more pronounced for elements with varying sizes or positions.
3. **Security and Compatibility**: `getComputedStyle` can pose security risks if used incorrectly (e.g., attempting to access private styles), and compatibility issues across different browsers.

**Library and Functionality**

In this benchmark, the following libraries are used:

1. **HTMLElement**: Used for accessing and manipulating HTML elements.
2. **getBoundingClientRect()**: A method on HTMLElement that returns the bounding box coordinates of an element.
3. **getComputedStyle**: A method on HTMLElement that returns a CSSStyleDeclaration object containing the computed styles for an element.

**Special JavaScript Features or Syntax**

None mentioned in this benchmark, but it's worth noting that other test cases may include features like:

* Promises
* Async/await
* Arrow functions
* Rest parameters

Keep in mind that these features are not present in this specific benchmark.