Benchmark: getBoundingClientRect vs offset performance

HTML Preparation code:

<div id="test" style="position: absolute; left: 10%; top: 20%;">Test</div>

Tests:

getBoundingClientRect
const testDiv = document.getElementById('test'); const testRect = testDiv.getBoundingClientRect(); const x = testRect.left + testRect.width / 2;
offset
const testDiv = document.getElementById('test'); const y = testDiv.offsetLeft + testDiv.offsetWidth / 2;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect
offset

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getBoundingClientRect	2389662.2 Ops/sec
offset	1246895.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark measures the performance of two methods to get the position of an element relative to its parent:

1. `getBoundingClientRect()`: This method returns a `DOMRect` object with the element's bounding box (i.e., the area surrounding the element).
2. `offset()`: This method returns an array containing the element's offset from its parent element.

**Options Compared**

The benchmark compares the performance of these two methods:

* **Pros of getBoundingClientRect()**:
	+ More accurate and robust, as it takes into account different layouts (e.g., flexbox, grid) and handles overflow cases.
	+ Easier to read and understand for developers, as it provides a single object with multiple properties (e.g., `top`, `left`, `width`, `height`).
* **Cons of getBoundingClientRect()**:
	+ More computationally expensive due to the need to calculate the element's bounding box, which can be slower on older or low-end devices.
* **Pros of offset()**:
	+ Faster execution time, as it only requires accessing two simple properties (left and top).
	+ More suitable for use cases where you only need the position and not the size.
* **Cons of offset()**:
	+ Less accurate and robust than getBoundingClientRect(), especially when dealing with complex layouts.

**Library Used**

The benchmark does not require any additional libraries beyond JavaScript's built-in DOM API.

**Special JS Features or Syntax**

There are no special features or syntax used in this benchmark. The test cases only rely on standard JavaScript and DOM APIs.

**Other Alternatives**

While not explicitly mentioned in the JSON, alternative methods for getting an element's position include:

* `getComputedStyle()`: This method returns a CSSStyleDeclaration object that can be used to access styles and layout properties of an element.
* `requestAnimationFrame()` with `getBoundingClientRect()`: You can use requestAnimationFrame() to continuously call getBoundingClientRect() on the same element, allowing you to measure its performance in real-time.

**Benchmark Preparation Code**

The provided HTML code creates a simple `<div>` element with the ID "test", which is used as the target for the benchmark.

**Individual Test Cases**

Each test case consists of a single JavaScript statement that calculates the position of an element:

1. `getBoundingClientRect()`: This test case uses the getBoundingClientRect() method to calculate the left and top positions of the test element, then combines these values with some arithmetic operations.
2. `offset()`: This test case uses the offset() method to access only the left and top properties of the test element.

When running this benchmark, you can see which method is faster for your specific browser and hardware configuration.

Related benchmarks:

getBoundingClientRect vs offset performance (version: 0)

Comparing performance of: getBoundingClientRect vs offset

Created: 2 years ago by: Guest

Jump to the latest result

getBoundingClientRect

offset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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