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: 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: 6 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
offsetWidth / offsetHeight (destructured and renamed)	1506827.9 Ops/sec
offsetWidth / offsetHeight (destructured)	1526830.1 Ops/sec
offsetWidth / offsetHeight (simple property access)	1599011.9 Ops/sec
getBoundingClientRect() (destructured)	1849792.5 Ops/sec
getBoundingClientRect() (simple property access)	1900986.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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: 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 2 months ago):