Benchmark: offsetWidth / offsetHeight vs. getBoundingClientRect()

offsetWidth / offsetHeight vs. getBoundingClientRect() (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: 4 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:

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;

Historical Performance Data aggregated from 144 community runs

Desktop Results:

Chrome 110 runs

getBoundingClientRect() (simple property access)

1.1M/s

getBoundingClientRect() (destructured)

1.1M/s

offsetWidth / offsetHeight (simple property access)

827K/s

offsetWidth / offsetHeight (destructured and renamed)

768K/s

offsetWidth / offsetHeight (destructured)

767K/s

Fastest: getBoundingClientRect() (simple property access) (1.5x faster)

View exact numbers

✓ getBoundingClientRect() (simple property access): 1,138,444 ops/sec
• getBoundingClientRect() (destructured): 1,106,426 ops/sec
• offsetWidth / offsetHeight (simple property access): 827,353 ops/sec
• offsetWidth / offsetHeight (destructured and renamed): 768,440 ops/sec
• offsetWidth / offsetHeight (destructured): 766,938 ops/sec

Firefox 27 runs

offsetWidth / offsetHeight (simple property access)

6.4M/s

offsetWidth / offsetHeight (destructured)

6.4M/s

offsetWidth / offsetHeight (destructured and renamed)

6.4M/s

getBoundingClientRect() (destructured)

3.0M/s

getBoundingClientRect() (simple property access)

2.9M/s

Fastest: offsetWidth / offsetHeight (simple property access) (2.2x faster)

View exact numbers

✓ offsetWidth / offsetHeight (simple property access): 6,430,355 ops/sec
• offsetWidth / offsetHeight (destructured): 6,425,653 ops/sec
• offsetWidth / offsetHeight (destructured and renamed): 6,420,216 ops/sec
• getBoundingClientRect() (destructured): 2,965,858 ops/sec
• getBoundingClientRect() (simple property access): 2,946,736 ops/sec

Safari 7 runs

offsetWidth / offsetHeight (destructured)

7.1M/s

offsetWidth / offsetHeight (destructured and renamed)

7.0M/s

offsetWidth / offsetHeight (simple property access)

6.0M/s

getBoundingClientRect() (simple property access)

3.7M/s

getBoundingClientRect() (destructured)

3.2M/s

Fastest: offsetWidth / offsetHeight (destructured) (2.2x faster)

View exact numbers

✓ offsetWidth / offsetHeight (destructured): 7,104,510 ops/sec
• offsetWidth / offsetHeight (destructured and renamed): 6,973,682 ops/sec
• offsetWidth / offsetHeight (simple property access): 6,043,932 ops/sec
• getBoundingClientRect() (simple property access): 3,667,761 ops/sec
• getBoundingClientRect() (destructured): 3,220,451 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
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; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Mac OS X 10.15

View result in a separate tab

offsetWidth / offsetHeight (destructured and renamed)

15.2M/s

offsetWidth / offsetHeight (destructured)

15.2M/s

offsetWidth / offsetHeight (simple property access)

14.9M/s

getBoundingClientRect() (simple property access)

9.1M/s

getBoundingClientRect() (destructured)

9.1M/s

View exact numbers

Test name	Executions per second
✓ offsetWidth / offsetHeight (destructured and renamed)	15,179,328 Ops/sec
offsetWidth / offsetHeight (destructured)	15,163,370 Ops/sec
offsetWidth / offsetHeight (simple property access)	14,864,196 Ops/sec
getBoundingClientRect() (simple property access)	9,098,546 Ops/sec
getBoundingClientRect() (destructured)	9,060,147 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of three different ways to calculate the perimeter of an element's bounding box:

1. `offsetWidth / offsetHeight` using destructure (two separate variables)
2. `offsetWidth / offsetHeight` using simple property access (one variable for both width and height)
3. `getBoundingClientRect()` with simple property access (width and height from a returned object)

**Comparison Options**

* **Destructuring vs. Simple Property Access**: Two ways to extract the width and height of an element's bounding box.
	+ Pros:
		- Destructuring is more readable and explicit, making it easier to understand the intent of the code.
		- It may lead to fewer typos or mistakes since each variable has a clear name.
	+ Cons:
		- May be slower due to the overhead of creating new variables.
* **getBoundingClientRect() vs. offsetWidth / offsetHeight**: Two methods for calculating the bounding box of an element.
	+ Pros:
		- `getBoundingClientRect()` is generally considered more modern and flexible, as it returns a single object with multiple properties (width, height, top, left, etc.).
		- It may be faster since it only needs to make one request to retrieve all the necessary information.
	+ Cons:
		- May not be supported in older browsers or environments that don't support modern DOM APIs.

**Library Used**

None explicitly mentioned in the benchmark definition, but `el` (short for "element") is likely a reference to an HTML element. However, since `getBoundingClientRect()` is used, it implies that the browser supports the `Element.getBoundingClientRect()` method, which is part of the DOM API.

**Special JS Feature/Syntax**

The benchmark uses deconstruction syntax (`const { width, height } = el;`) and simple property access (`el.offsetWidth`), which are modern JavaScript features. The `getBoundingClientRect()` method is a more standard way to calculate the bounding box, but it's also been around for a while.

**Benchmark Results**

The latest results show that:

* Using `getBoundingClientRect()` with simple property access is the fastest (averaging 1207.04 executions per second).
* Using `offsetWidth / offsetHeight` with destructure is slower than the previous method but still faster than simple property access (averaging 1232.20 executions per second).
* Using `offsetWidth / offsetHeight` with simple property access is the slowest (averaging 1692.10 executions per second).

**Alternatives**

Some alternative approaches to consider:

* Using `getBoundingClientRect()` with a separate variable for width and height might be even faster, but it's not tested in this benchmark.
* Using a custom function or a library like jQuery to calculate the bounding box might offer better performance, but it's not part of the standard DOM API.
* Using a different method altogether, such as using CSS transformations or rendering the element manually, might be more efficient in certain scenarios.

offsetWidth / offsetHeight vs. getBoundingClientRect() (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: 4 years ago by: Guest

Go to the latest result

offsetWidth / offsetHeight (destructured and renamed)

offsetWidth / offsetHeight (destructured)

offsetWidth / offsetHeight (simple property access)

getBoundingClientRect() (destructured)

getBoundingClientRect() (simple property access)

Historical Performance Data aggregated from 144 community runs

Desktop Results:

Chrome 110 runs

Firefox 27 runs

Safari 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: `offsetWidth / offsetHeight (destructured and renamed) vs offsetWidth / offsetHeight (destructured) vs offsetWidth / offsetHeight (simple property access) vs getBoundingClientRect() (destructured) vs getBoundingClientRect() (simple property access)`