Benchmark: offsetTop vs getBoundingClientRect

HTML Preparation code:

<div id="test">test</div>

Script Preparation code:

var test = document.getElementById('test');

Tests:

offsetTop
test.offsetTop;
getBoundingClientRect
test.getBoundingClientRect().top;

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 10 runs

getBoundingClientRect

904K/s

offsetTop

563K/s

Fastest: getBoundingClientRect (1.6x faster)

View exact numbers

✓ getBoundingClientRect: 904,074 ops/sec
• offsetTop: 563,082 ops/sec

Firefox 6 runs

offsetTop

9.3M/s

getBoundingClientRect

2.8M/s

Fastest: offsetTop (3.3x faster)

View exact numbers

✓ offsetTop: 9,316,992 ops/sec
• getBoundingClientRect: 2,836,446 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
offsetTop
getBoundingClientRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Linux

View result in a separate tab

getBoundingClientRect

561K/s

offsetTop

379K/s

View exact numbers

Test name	Executions per second
✓ getBoundingClientRect	560,911 Ops/sec
offsetTop	379,225 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 benchmark and its test cases to explain what's being tested, compared, and their pros/cons.

**Benchmark Overview**

The benchmark compares two ways to access the top position of an HTML element: `offsetTop` and `getBoundingClientRect().top`. The goal is to determine which method is faster for a given JavaScript code snippet.

**Test Case 1: offsetTop**

* **Library:** None (this is a standard JavaScript API)
* **Purpose:** Access the top position of an HTML element using the `offsetTop` property.
* **Special JS Feature/Syntax:** This test case does not use any special JavaScript features or syntax.
* **Pros and Cons:**
	+ Pros:
		- Widely supported by most browsers.
		- Simple to implement.
	- Cons:
		- Can be slower than other methods, especially in older browsers.

**Test Case 2: getBoundingClientRect().top**

* **Library:** `getBoundingClientRect()` is a part of the HTML5 API, but it's widely supported even in older browsers due to its simplicity and limited functionality compared to other positioning APIs.
* **Purpose:** Access the top position of an HTML element using the `getBoundingClientRect().top` method.
* **Special JS Feature/Syntax:** This test case does not use any special JavaScript features or syntax, but it relies on a relatively new API that's part of the HTML5 specification.

**Comparison**

The benchmark compares the two methods for accessing the top position of an HTML element. The results are likely to show which method is faster in different browsers and devices.

**Other Alternatives**

In addition to `offsetTop` and `getBoundingClientRect().top`, other alternatives exist for accessing the top position of an HTML element, such as:

1. `clientTop`: This property returns the distance between the client area of an element's offset parent and the client area of the element itself. It's not directly related to the top position but can be used in some scenarios.
2. `top` (using CSS): You can also use CSS to set the `position` property to `absolute` or `fixed`, which allows you to access the top position using the `offsetParent.top` property. However, this approach is more complex and requires a different set of conditions.

**Other Considerations**

* **Browser Support:** While `getBoundingClientRect()` is widely supported, older browsers may not support it as well as newer ones.
* **Performance:** The performance difference between these two methods can vary depending on the browser, device, and JavaScript code. In general, `offsetTop` might be slower due to its reliance on the element's offset parent, while `getBoundingClientRect().top` is more efficient.
* **Best Practice:** Using `getBoundingClientRect()` is generally considered a better practice than relying solely on `offsetTop`, as it provides more accurate results and is less prone to edge cases.

Overall, this benchmark helps users understand the performance difference between two popular methods for accessing an HTML element's top position.

offsetTop vs getBoundingClientRect (version: 0)

offsetTop or getBoundingClientRect().top

Comparing performance of: `offsetTop vs getBoundingClientRect`

Created: 5 years ago by: Guest

Go to the latest result

offsetTop

getBoundingClientRect

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 10 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

offsetTop vs getBoundingClientRect (version: 0)

offsetTop or getBoundingClientRect().top

Comparing performance of: offsetTop vs getBoundingClientRect

Created: 5 years ago by: Guest

Go to the latest result

offsetTop

getBoundingClientRect

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 10 runs

Firefox 6 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: `offsetTop vs getBoundingClientRect`