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;

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
getBoundingClientRect	898799.6 Ops/sec
getLocalDOMRect	125112.9 Ops/sec
Access offset properties directly	410610.4 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 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.

Related benchmarks:

getBoundingClientRect vs offset (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

getBoundingClientRect

getLocalDOMRect

Access offset properties directly

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