Benchmark: clientWidth / clientHeight vs. getBoundingClientRect()

clientWidth / clientHeight vs. getBoundingClientRect() (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)`

Created: 5 years ago by: Guest

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;

Historical Performance Data aggregated from 119 community runs

Desktop Results:

Chrome 96 runs

getBoundingClientRect() (destructured)

1.0M/s

getBoundingClientRect() (simple property access)

971K/s

clientWidth / clientHeight (destructured and renamed)

762K/s

clientWidth / clientHeight (destructured)

754K/s

clientWidth / clientHeight (simple property access)

746K/s

Fastest: getBoundingClientRect() (destructured) (1.4x faster)

View exact numbers

✓ getBoundingClientRect() (destructured): 1,017,609 ops/sec
• getBoundingClientRect() (simple property access): 971,482 ops/sec
• clientWidth / clientHeight (destructured and renamed): 761,907 ops/sec
• clientWidth / clientHeight (destructured): 753,609 ops/sec
• clientWidth / clientHeight (simple property access): 746,136 ops/sec

Firefox 12 runs

clientWidth / clientHeight (simple property access)

9.4M/s

clientWidth / clientHeight (destructured)

9.4M/s

clientWidth / clientHeight (destructured and renamed)

9.3M/s

getBoundingClientRect() (destructured)

3.0M/s

getBoundingClientRect() (simple property access)

2.9M/s

Fastest: clientWidth / clientHeight (simple property access) (3.3x faster)

View exact numbers

✓ clientWidth / clientHeight (simple property access): 9,416,036 ops/sec
• clientWidth / clientHeight (destructured): 9,368,702 ops/sec
• clientWidth / clientHeight (destructured and renamed): 9,252,952 ops/sec
• getBoundingClientRect() (destructured): 3,029,811 ops/sec
• getBoundingClientRect() (simple property access): 2,875,589 ops/sec

Other 6 runs

getBoundingClientRect() (destructured)

1.3M/s

getBoundingClientRect() (simple property access)

1.3M/s

clientWidth / clientHeight (simple property access)

882K/s

clientWidth / clientHeight (destructured)

880K/s

clientWidth / clientHeight (destructured and renamed)

838K/s

Fastest: getBoundingClientRect() (destructured) (1.6x faster)

View exact numbers

✓ getBoundingClientRect() (destructured): 1,337,111 ops/sec
• getBoundingClientRect() (simple property access): 1,327,784 ops/sec
• clientWidth / clientHeight (simple property access): 881,848 ops/sec
• clientWidth / clientHeight (destructured): 879,795 ops/sec
• clientWidth / clientHeight (destructured and renamed): 838,400 ops/sec

Mobile Results:

Chrome 5 runs

clientWidth / clientHeight (destructured)

109K/s

getBoundingClientRect() (destructured)

106K/s

getBoundingClientRect() (simple property access)

105K/s

clientWidth / clientHeight (destructured and renamed)

101K/s

clientWidth / clientHeight (simple property access)

87K/s

Fastest: clientWidth / clientHeight (destructured) (1.3x faster)

View exact numbers

✓ clientWidth / clientHeight (destructured): 109,270 ops/sec
• getBoundingClientRect() (destructured): 106,047 ops/sec
• getBoundingClientRect() (simple property access): 105,351 ops/sec
• clientWidth / clientHeight (destructured and renamed): 101,438 ops/sec
• clientWidth / clientHeight (simple property access): 86,980 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 / clientHeight (destructured and renamed)
clientWidth / clientHeight (destructured)
clientWidth / clientHeight (simple property access)
getBoundingClientRect() (destructured)
getBoundingClientRect() (simple property access)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Windows

View result in a separate tab

clientWidth / clientHeight (destructured)

16.4M/s

clientWidth / clientHeight (destructured and renamed)

16.3M/s

clientWidth / clientHeight (simple property access)

15.9M/s

getBoundingClientRect() (simple property access)

5.5M/s

getBoundingClientRect() (destructured)

5.5M/s

View exact numbers

Test name	Executions per second
✓ clientWidth / clientHeight (destructured)	16,413,431 Ops/sec
clientWidth / clientHeight (destructured and renamed)	16,269,726 Ops/sec
clientWidth / clientHeight (simple property access)	15,862,736 Ops/sec
getBoundingClientRect() (simple property access)	5,518,160 Ops/sec
getBoundingClientRect() (destructured)	5,456,130 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the Benchmark Definition and explain what is being tested.

The benchmark is comparing four different approaches to calculate the perimeter of an HTML element:

1. **Simple Property Access**: `const width = el.clientWidth; const height = el.clientHeight; const perim = (width + height) * 2;`
	* This approach accesses the `clientWidth` and `clientHeight` properties directly on the `el` element.
	* Pros: Simple, straightforward, and easy to understand.
	* Cons: Might be slower due to property access, which can lead to additional function calls or method invocations.
2. **Destructured Property Access**: `const { clientWidth, clientHeight } = el; const perim = (clientWidth + clientHeight) * 2;`
	* This approach uses destructuring assignment to extract the `clientWidth` and `clientHeight` values from the `el` element.
	* Pros: More concise and readable than simple property access.
	* Cons: Might be slightly slower due to the destructuring assignment, which can lead to additional function calls or method invocations.
3. **Destructured and Renamed Property Access**: `const { clientWidth: width, clientHeight: height } = el; const perim = (width + height) * 2;`
	* This approach uses destructuring assignment with renamed variables for better readability.
	* Pros: Similar to destructured property access but with more descriptive variable names.
	* Cons: Slightly less concise than destructured property access.
4. **getBoundingClientRect()**: `const { width, height } = el.getBoundingClientRect(); const perim = (width + height) * 2;`
	* This approach uses the `getBoundingClientRect()` method to get the element's bounding rectangle and then extracts the `width` and `height` values from it.
	* Pros: Might be faster since `getBoundingClientRect()` is a single method call that returns an object with multiple properties, which can reduce the number of function calls or method invocations.
	* Cons: More verbose and may require more CPU cycles to calculate the bounding rectangle.

The benchmark results show the execution frequency per second for each approach on a specific device (Firefox 131 on Ubuntu). The results suggest that:

* Destructured property access is the fastest approach, followed closely by getBoundingClientRect().
* Destructured property access is faster than simple property access.
* Destructured and renamed property access has slightly slower performance compared to destructured property access.

Other alternatives for calculating the perimeter of an HTML element include:

* Using a library like jQuery or Lodash, which provide their own methods for accessing and manipulating DOM elements.
* Implementing custom logic using JavaScript functions or object-oriented programming (OOP) principles.
* Utilizing native Web APIs like CSS Grid or SVG, which offer more advanced layout and geometry capabilities.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case, device, and browser.

clientWidth / clientHeight vs. getBoundingClientRect() (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)

Created: 5 years ago by: Guest

Go to the latest result

clientWidth / clientHeight (destructured and renamed)

clientWidth / clientHeight (destructured)

clientWidth / clientHeight (simple property access)

getBoundingClientRect() (destructured)

getBoundingClientRect() (simple property access)

Historical Performance Data aggregated from 119 community runs

Desktop Results:

Chrome 96 runs

Firefox 12 runs

Other 6 runs

Mobile Results:

Chrome 5 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 / clientHeight (destructured and renamed) vs clientWidth / clientHeight (destructured) vs clientWidth / clientHeight (simple property access) vs getBoundingClientRect() (destructured) vs getBoundingClientRect() (simple property access)`