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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
getBoundingClientRect	877139.1 Ops/sec
offset	443636.4 Ops/sec

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

Jump to the latest result

getBoundingClientRect

offset

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