Benchmark: scrollHeight vs getBoundingClientRect().height

HTML Preparation code:

<div id="el">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Script Preparation code:

var el = document.getElementById("el");

Tests:

scrollHeight
const height = el.scrollHeight;
getBoundingClientRect().height
const height = el.getBoundingClientRect().height;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
scrollHeight
getBoundingClientRect().height

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
scrollHeight	12265607.0 Ops/sec
getBoundingClientRect().height	4470081.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided JSON represents a benchmark that compares the performance of two methods to get the height of an HTML element: `scrollHeight` and `getBoundingClientRect().height`.

In this case, the benchmark is testing whether using `scrollHeight` or `getBoundingClientRect().height` provides better performance.

**Options compared:**

There are two options being compared:

1. **scrollHeight**: This method returns the total height of an element, including all its content, without needing to parse HTML or CSS.
2. **getBoundingClientRect().height**: This method uses the `getBoundingClientRect()` API to get the size of an element, and then extracts the height from the returned rectangle.

**Pros and Cons:**

1. **scrollHeight**:
	* Pros:
		+ Simple and efficient (no need to parse HTML or CSS)
		+ Can be faster for elements with a lot of content
	* Cons:
		+ May not work as expected for elements with complex layouts or nested content
		+ Returns the total height, including padding and border
2. **getBoundingClientRect().height**:
	* Pros:
		+ More accurate for elements with complex layouts or nested content
		+ Returns only the height of the element's content area
	* Cons:
		+ Requires the `getBoundingClientRect()` API, which may not be supported in older browsers
		+ May be slower due to the need to parse HTML and CSS

**Library: None**

There is no library being used in this benchmark.

**Special JS feature or syntax: None**

No special JavaScript features or syntax are used in this benchmark.

**Other considerations:**

* The benchmark uses a single DOM element (`<div>`) with an `<h2>` child element. This may not represent the average use case for getting an element's height.
* The benchmark is running on a desktop platform (Windows), which may not be representative of mobile or other platforms.

**Alternatives:**

Some alternative approaches to get an element's height include:

1. **DOM Tracy**: A library that provides a simple way to measure the performance of DOM operations, including getting an element's height.
2. **Measure.js**: A JavaScript library specifically designed for measuring the performance of DOM operations and other tasks.

It's worth noting that MeasureThat.net is primarily focused on benchmarking JavaScript microbenchmarks, so these alternative approaches may not be directly applicable to this specific benchmark.

Related benchmarks:

scrollHeight vs getBoundingClientRect().height (version: 0)

Comparing performance of: scrollHeight vs getBoundingClientRect().height

Created: one year ago by: Guest

Jump to the latest result

scrollHeight

getBoundingClientRect().height

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):