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;

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 15 runs

scrollHeight

1.7M/s

getBoundingClientRect().height

1.3M/s

Fastest: scrollHeight (1.3x faster)

View exact numbers

✓ scrollHeight: 1,659,170 ops/sec
• getBoundingClientRect().height: 1,266,236 ops/sec

Firefox 6 runs

scrollHeight

10.9M/s

getBoundingClientRect().height

4.1M/s

Fastest: scrollHeight (2.7x faster)

View exact numbers

✓ scrollHeight: 10,864,296 ops/sec
• getBoundingClientRect().height: 4,054,074 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
scrollHeight
getBoundingClientRect().height

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

scrollHeight

6.6M/s

getBoundingClientRect().height

3.6M/s

View exact numbers

Test name	Executions per second
✓ scrollHeight	6,592,304 Ops/sec
getBoundingClientRect().height	3,575,261 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 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.

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

Comparing performance of: `scrollHeight vs getBoundingClientRect().height`

Created: 2 years ago by: Guest

Go to the latest result

scrollHeight

getBoundingClientRect().height

Historical Performance Data aggregated from 21 community runs

Desktop Results:

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

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

Comparing performance of: scrollHeight vs getBoundingClientRect().height

Created: 2 years ago by: Guest

Go to the latest result

scrollHeight

getBoundingClientRect().height

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 15 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: `scrollHeight vs getBoundingClientRect().height`