Benchmark: offsetWidth / offsetHeight vs. getBoundingClientRect() vs. clientWidth / clientHeight

offsetWidth / offsetHeight vs. getBoundingClientRect() vs. clientWidth / clientHeight (version: 0)

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

Created: one year ago by: Guest

Jump 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:

offsetWidth / offsetHeight (destructured and renamed)
const { offsetWidth: width, offsetHeight: height } = el; const perim = (width + height) * 2;
offsetWidth / offsetHeight (destructured)
const { offsetWidth, offsetHeight } = el; const perim = (offsetWidth + offsetHeight) * 2;
offsetWidth / offsetHeight (simple property access)
const width = el.offsetWidth; const height = el.offsetHeight; 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;
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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
offsetWidth / offsetHeight (destructured and renamed)	1943031.2 Ops/sec
offsetWidth / offsetHeight (destructured)	2147353.8 Ops/sec
offsetWidth / offsetHeight (simple property access)	2253864.8 Ops/sec
getBoundingClientRect() (destructured)	2552615.0 Ops/sec
getBoundingClientRect() (simple property access)	2854651.0 Ops/sec
clientWidth / clientHeight (destructured)	2471218.2 Ops/sec
clientWidth / clientHeight (simple property access)	2470721.0 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 explanation of what is being tested in this benchmark.

**Overview**

The benchmark measures the performance of different ways to calculate the perimeter of an element in HTML, specifically using `offsetWidth`, `offsetHeight`, `clientWidth`, and `clientHeight`. The tests compare two approaches: destructured assignment (using destructuring syntax) and simple property access (using dot notation).

**Test Cases**

There are six test cases:

1. **getBoundingClientRect() (destructured)**: This test uses the `getBoundingClientRect()` method to get the bounding rectangle of an element, and then extracts the width and height from it using destructuring assignment.
2. **getBoundingClientRect() (simple property access)**: Similar to the previous one, but uses dot notation to access the `width` and `height` properties directly.
3. **clientWidth / clientHeight (destructured)**: This test uses the `clientWidth` and `clientHeight` properties of an element directly, similar to the first two tests.
4. **clientWidth / clientHeight (simple property access)**: Similar to the previous one, but uses dot notation to access the `width` and `height` properties directly.
5. **offsetWidth / offsetHeight (destructured)**: This test uses destructuring assignment to extract the width and height from the `offsetWidth` and `offsetHeight` properties of an element.
6. **offsetWidth / offsetHeight (simple property access)**: Similar to the previous one, but uses dot notation to access the `width` and `height` properties directly.

**Pros and Cons**

* **Destructuring assignment**: This approach can be more readable and concise, especially when dealing with multiple variables. However, it may also lead to unnecessary complexity and overuse of features like destructuring.
* **Simple property access (dot notation)**: This approach is often more straightforward and easy to read, but it can lead to cluttered code if not used judiciously.

**Considerations**

* The `getBoundingClientRect()` method is generally faster than accessing the element's properties directly because it avoids the need for a DOM query.
* Destructured assignment can be beneficial when dealing with multiple variables, as it reduces the need for temporary variables.
* Using dot notation can lead to code bloat if not used carefully.

**Library and Framework Usage**

None of the test cases explicitly use any third-party libraries or frameworks. However, some browsers (like Chrome) have built-in optimizations and features that may affect performance.

**Special JavaScript Features**

No special JavaScript features are mentioned in the benchmark definition or individual test cases.

Related benchmarks: