Benchmark: clientWidth / clientHeight vs. getBoundingClientRect()awe

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

Created: 2 years 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;

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)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
offsetWidth / offsetHeight (destructured and renamed)	1579083.5 Ops/sec
offsetWidth / offsetHeight (destructured)	1416022.8 Ops/sec
offsetWidth / offsetHeight (simple property access)	1387377.0 Ops/sec
getBoundingClientRect() (destructured)	2273135.8 Ops/sec
getBoundingClientRect() (simple property access)	2582263.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON data.

**Benchmark Definition**
The benchmark is defined by two main parts: Script Preparation Code and Html Preparation Code.

1. **Script Preparation Code**: This code snippet is executed in the browser's context, allowing for dynamic manipulation of the DOM. In this case, it retrieves an HTML element (`<div>`) with the id "el". The script then assigns the retrieved element to a variable `el`.
2. **Html Preparation Code**: This code snippet defines the HTML structure that will be used in the benchmark. It creates a simple `<div>` element with an `<h2>` inside.

**Individual Test Cases**
There are four test cases, each representing a different way of calculating the perimeter (a 2D shape's boundary length) using either `offsetWidth`, `offsetHeight`, or `getBoundingClientRect()` methods.

Let's break down each test case:

### 1. offsetWidth / offsetHeight (destructured and renamed)

```javascript
const { width, height } = el;
const perim = (width + height) * 2;
```

Pros: This approach is straightforward and easy to read. By destructuring the object returned by `offsetWidth` and `offsetHeight`, we can access the values directly.

Cons: This method assumes that `offsetWidth` and `offsetHeight` are numeric properties, which might not always be the case (e.g., if the element has a non-numeric width or height).

### 2. offsetWidth / offsetHeight (destructured)

```javascript
const { offsetWidth, offsetHeight } = el;
const perim = (offsetWidth + offsetHeight) * 2;
```

This approach is similar to the previous one, but it explicitly accesses `offsetWidth` and `offsetHeight` as properties.

### 3. offsetWidth / offsetHeight (simple property access)

```javascript
const width = el.offsetWidth;
const height = el.offsetHeight;
const perim = (width + height) * 2;
```

Pros: This approach is simple and easy to understand, but it might be slightly slower than the other two methods.

Cons: By accessing `offsetWidth` and `offsetHeight` as properties, we're essentially calling getter functions, which can introduce a small overhead.

### 4. getBoundingClientRect() (destructured)

```javascript
const { width, height } = el.getBoundingClientRect();
const perim = (width + height) * 2;
```

Pros: This approach uses the `getBoundingClientRect()` method to access the element's size in pixels. It can be more accurate than accessing `offsetWidth` and `offsetHeight`, as it includes padding and borders.

Cons: The `getBoundingClientRect()` method returns an object with multiple properties, so we need to extract the width and height values explicitly.

### 5. getBoundingClientRect() (simple property access)

```javascript
const rect = el.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const perim = (width + height) * 2;
```

This approach uses `getBoundingClientRect()` but accesses the width and height properties directly, which can be slower than using destructuring.

**Library: getBoundingClientRect()**
The `getBoundingClientRect()` method is a W3C standard for retrieving an element's size in pixels. It takes into account padding, borders, margins, and other layout properties.

**Other Alternatives**

* Using CSS `transform` or `translateX/Y` properties to calculate the perimeter.
* Using SVG or canvas elements to draw shapes with precise calculations.
* Implementing custom width and height calculations using DOM manipulation (e.g., parsing HTML content or using a library like jQuery).

Keep in mind that each approach has its pros and cons, and the best method for your specific use case may depend on factors like performance requirements, browser compatibility, and code readability.

Related benchmarks:

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

Created: 2 years ago by: Guest

Jump to the latest result

offsetWidth / offsetHeight (destructured and renamed)

offsetWidth / offsetHeight (destructured)

offsetWidth / offsetHeight (simple property access)

getBoundingClientRect() (destructured)

getBoundingClientRect() (simple property access)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):