Benchmark: getBoundingClientRect vs offset when taking into account CSS transformation

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect
getLocalDOMRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getBoundingClientRect	2450241.0 Ops/sec
getLocalDOMRect	342034.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents two benchmark test cases, each designed to measure the performance difference between `getBoundingClientRect` and `getLocalDOMRect` functions.

**Test 1: getBoundingClientRect**

This test case measures the performance of `getBoundingClientRect`, which returns the size and position of an HTML element relative to its parent element. The function takes into account the CSS transformations applied to the element, such as rotations, translations, and scaling.

The pros of using `getBoundingClientRect` are:

* It's a widely supported API across different browsers.
* It provides accurate results in most cases.
* It's relatively easy to implement.

However, there are some cons:

* It can be slower than other methods, especially when dealing with complex transformations or deep nested elements.
* It may not work correctly for certain edge cases, such as elements with `display: none` or `visibility: hidden`.

**Test 2: getLocalDOMRect**

This test case measures the performance of a custom function called `getLocalDOMRect`, which manually calculates the element's size and position by traversing its offset parent chain.

The pros of using `getLocalDOMRect` are:

* It can be faster than `getBoundingClientRect` for certain cases, especially when dealing with simple transformations or shallow elements.
* It provides more control over the calculation process.

However, there are some cons:

* It may not work correctly for all edge cases, such as elements with complex CSS transformations or deeply nested element trees.
* It requires manual implementation and maintenance of the offset parent chain calculation logic.

**Library: requestAnimationFrame**

Both test cases use `requestAnimationFrame` to schedule the benchmark tests. This API allows developers to request the browser to call a specific function at the next animation frame, providing better performance and responsiveness compared to other scheduling methods.

**Special JavaScript feature or syntax: None**

There are no special JavaScript features or syntaxes being used in these test cases.

**Other alternatives:**

If you need alternative benchmarking approaches, here are some options:

* **CSSOMViewports**: Instead of using `getBoundingClientRect`, you can use the `CSSOMViewports` API to measure an element's size and position.
* **DOMRect**: You can use the `DOMRect` interface to manually calculate an element's size and position.
* **GetBoundingClientRect with transformations**: If you need to measure elements with complex transformations, you can use a combination of `getBoundingClientRect` and CSS calculations to estimate the transformation effects.

Keep in mind that each alternative approach has its pros and cons, and may require additional implementation or tweaking to achieve optimal results.

Related benchmarks:

getBoundingClientRect vs offset when taking into account CSS transformation (version: 0)

Comparing performance of: getBoundingClientRect vs getLocalDOMRect

Created: 3 years ago by: Guest

Jump to the latest result

getBoundingClientRect

getLocalDOMRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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