Benchmark: getBoundingClientRect vs offset

HTML Preparation code:

<div id="el" style="transform: rotateZ(45deg)">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Script Preparation code:

function getLocalDOMRect(el) {
  let offsetTop = 0;
  let offsetLeft = 0;
  const width = el.offsetWidth;
  const height = el.offsetHeight;
  while (el instanceof HTMLElement) {
    offsetTop += el.offsetTop;
    offsetLeft += el.offsetLeft;
    el = el.offsetParent;
  }

  return new DOMRect(offsetLeft, offsetTop, width, height);
}

const el = document.getElementById("el");

Tests:

getBoundingClientRect
const { left, right, top, bottom } = el.getBoundingClientRect();
getLocalDOMRect
const { left, right, top, bottom } = getLocalDOMRect(el);
Access offset properties directly
const { offsetWidth, offsetHeight, offsetTop } = el;

Historical Performance Data aggregated from 147 community runs

Desktop Results:

Chrome 105 runs

getBoundingClientRect

1.0M/s

Access offset properties directly

457K/s

getLocalDOMRect

147K/s

Fastest: getBoundingClientRect (7.0x faster)

View exact numbers

✓ getBoundingClientRect: 1,026,568 ops/sec
• Access offset properties directly: 456,642 ops/sec
• getLocalDOMRect: 146,739 ops/sec

Firefox 19 runs

Access offset properties directly

2.3M/s

getBoundingClientRect

1.5M/s

getLocalDOMRect

783K/s

Fastest: Access offset properties directly (3.0x faster)

View exact numbers

✓ Access offset properties directly: 2,341,422 ops/sec
• getBoundingClientRect: 1,515,181 ops/sec
• getLocalDOMRect: 783,486 ops/sec

Safari 12 runs

getBoundingClientRect

2.9M/s

Access offset properties directly

2.8M/s

getLocalDOMRect

836K/s

Fastest: getBoundingClientRect (3.5x faster)

View exact numbers

✓ getBoundingClientRect: 2,924,939 ops/sec
• Access offset properties directly: 2,778,338 ops/sec
• getLocalDOMRect: 835,577 ops/sec

Mobile Results:

Safari 6 runs

Access offset properties directly

2.8M/s

getBoundingClientRect

2.6M/s

getLocalDOMRect

874K/s

Fastest: Access offset properties directly (3.2x faster)

View exact numbers

✓ Access offset properties directly: 2,778,278 ops/sec
• getBoundingClientRect: 2,584,480 ops/sec
• getLocalDOMRect: 873,954 ops/sec

Chrome 5 runs

getBoundingClientRect

792K/s

Access offset properties directly

317K/s

getLocalDOMRect

101K/s

Fastest: getBoundingClientRect (7.9x faster)

View exact numbers

✓ getBoundingClientRect: 791,942 ops/sec
• Access offset properties directly: 316,828 ops/sec
• getLocalDOMRect: 100,505 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
getBoundingClientRect
getLocalDOMRect
Access offset properties directly

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 148 on Windows

View result in a separate tab

Access offset properties directly

1.7M/s

getBoundingClientRect

827K/s

getLocalDOMRect

443K/s

View exact numbers

Test name	Executions per second
✓ Access offset properties directly	1,656,951 Ops/sec
getBoundingClientRect	826,678 Ops/sec
getLocalDOMRect	443,148 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 provided benchmark and its test cases.

**Benchmark Definition JSON**

The `getBoundingClientRect vs offset` benchmark compares three approaches to retrieve the dimensions of an HTML element:

1. **getBoundingClientRect**: This method returns the position and size of an element relative to the viewport or another positioned ancestor.
2. **getLocalDOMRect (getLocalRect)**: This custom function, implemented by the script preparation code, recursively traverses the DOM tree upwards from the element to calculate its offset coordinates.

**Comparison Options**

The benchmark tests the following options:

* `getBoundingClientRect` vs `getLocalDOMRect`: Measures which approach is faster for retrieving an element's dimensions.
* `Access offset properties directly`: Tests how fast it is to access the offset properties (`offsetWidth`, `offsetHeight`, and `offsetTop`) of an element.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **getBoundingClientRect**:
	* Pros: Faster, more accurate (as it uses the browser's optimized algorithms), and less prone to errors.
	* Cons: May not work correctly for elements with complex layout or positioning.
2. **getLocalDOMRect**: 
	* Pros: More control over the calculation process, may be useful for debugging or custom use cases.
	* Cons: Slower, more error-prone (due to manual DOM traversal), and may not handle all edge cases.

**Library Usage**

None of the test cases use a JavaScript library explicitly. However, `getBoundingClientRect` is a standard method provided by modern browsers' API.

**Special JS Feature or Syntax**

There's no special JavaScript feature or syntax being tested here. The focus is on comparing the performance of different approaches to retrieve an element's dimensions.

**Other Alternatives**

For benchmarking purposes, you might also consider:

* Using `getComputedStyle` to access CSS styles
* Comparing the performance of using `requestAnimationFrame` for updates vs. polling at regular intervals
* Testing the impact of different cache strategies or optimization techniques on performance

In summary, this benchmark helps evaluate the relative performance of three approaches for retrieving an element's dimensions: `getBoundingClientRect`, a custom `getLocalDOMRect` function, and direct access to offset properties.

getBoundingClientRect vs offset (version: 0)

Comparing performance of: `getBoundingClientRect vs getLocalDOMRect vs Access offset properties directly`

Created: 3 years ago by: Guest

Go to the latest result

getBoundingClientRect

getLocalDOMRect

Access offset properties directly

Historical Performance Data aggregated from 147 community runs

Desktop Results:

Chrome 105 runs

Firefox 19 runs

Safari 12 runs

Mobile Results:

Safari 6 runs

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

getBoundingClientRect vs offset (version: 0)

Comparing performance of: getBoundingClientRect vs getLocalDOMRect vs Access offset properties directly

Created: 3 years ago by: Guest

Go to the latest result

getBoundingClientRect

getLocalDOMRect

Access offset properties directly

Historical Performance Data aggregated from 147 community runs

Desktop Results:

Chrome 105 runs

Firefox 19 runs

Safari 12 runs

Mobile Results:

Safari 6 runs

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: `getBoundingClientRect vs getLocalDOMRect vs Access offset properties directly`