Benchmark: clientHeight vs offsetHeight vs getBoundingClientRect height only

HTML Preparation code:

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

Script Preparation code:

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

Tests:

clientHeight
const { clientHeight } = el; const perim = (clientHeight) * 2;
offsetHeight
const { offsetHeight } = el; const perim = (offsetHeight) * 2;
getBoundingClientRect
const { height } = el.getBoundingClientRect(); const perim = (height) * 2;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientHeight
offsetHeight
getBoundingClientRect

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
clientHeight	1281814.5 Ops/sec
offsetHeight	1310361.8 Ops/sec
getBoundingClientRect	837368.9 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 benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to calculate the perimeter (or circumference) of an HTML element:

1. `clientHeight`: The client height is the distance between the top and bottom edges of the element, excluding any padding or borders.
2. `offsetHeight`: The offset height is the total distance from the top edge of the element to its baseline, including any padding or borders.
3. `getBoundingClientRect.height`: The `getBoundingClientRect` method returns an object with a `height` property that represents the current size of the element in pixels.

**Options Compared**

The benchmark compares the performance of each approach on three different browsers (Safari 16) and two device platforms (Desktop).

**Pros and Cons of Each Approach**

1. **clientHeight**: Pros:
	* Fastest, as it only requires accessing a single property.
	* Most accurate for elements with minimal padding or borders.
Cons:
	* May not work correctly for elements with complex layouts or large padding/borders.
2. **offsetHeight**: Pros:
	* More accurate than `clientHeight` for elements with significant padding or borders.
	* Works well for most HTML elements.
Cons:
	* Slower than `clientHeight`, as it requires accessing multiple properties.
3. **getBoundingClientRect.height**: Pros:
	* Fast and accurate, as it uses a dedicated method to calculate the element's size.
	* Works well for most HTML elements.
Cons:
	* May not work correctly if the browser or device is missing support for `getBoundingClientRect`.

**Library**

The benchmark does not use any external libraries. However, it relies on the following JavaScript features:

1. **`document.getElementById()`**: A method to retrieve an element by its ID.
2. **`const { property } = el;`**: Destructuring assignment to extract a property from an object.

**Special JS Feature**

The benchmark uses the `getBoundingClientRect()` method, which is a special JavaScript feature introduced in modern browsers (starting from Firefox 4 and Chrome 16). This method returns an object with various properties that describe the element's position and size relative to the viewport.

**Other Alternatives**

To replicate this benchmark, you can use the following alternatives:

1. **Use a library**: Instead of using JavaScript features like `document.getElementById()` and `getBoundingClientRect()`, you could use a library like jQuery or DOMParser to parse the HTML and calculate the element's size.
2. **Mock the browser**: You could write a test framework that mocks the behavior of different browsers, allowing you to run the benchmark on various platforms without needing actual browser support.
3. **Use a virtual DOM**: You could use a virtual DOM library like React or Vue.js to simulate the rendering and layout of HTML elements, making it easier to measure performance in isolation.

Keep in mind that each alternative has its own trade-offs and challenges. The original benchmark uses native JavaScript features, which provides the most accurate results but requires actual browser support.

Related benchmarks:

clientHeight vs offsetHeight vs getBoundingClientRect height only (version: 0)

Comparing performance of: clientHeight vs offsetHeight vs getBoundingClientRect

Created: 3 years ago by: Guest

Jump to the latest result

clientHeight

offsetHeight

getBoundingClientRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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