Benchmark: window.getComputedStyle vs. getBoundingClientRect for height

HTML Preparation code:

<div id="foo"></div>

Tests:

getComputedStyle
var i = 5000; const node = document.getElementById('foo') while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return parseFloat(window.getComputedStyle(node).height) > 0; }
getBoundingClientRect
var i = 5000; const node = document.getElementById('foo') while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return node.getBoundingClientRect().height > 0; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
getBoundingClientRect

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of two methods to retrieve the height of an HTML element: `window.getComputedStyle` and `node.getBoundingClientRect`. Both methods are used to get the height of an element, but they have different approaches and characteristics.

**Options Compared**

The benchmark compares two options:

1. **`window.getComputedStyle`**: This method retrieves the computed style properties of an element, including its height. It returns a CSSStyleDeclaration object that contains all the styles applied to the element.
2. **`node.getBoundingClientRect`**: This method returns a rectangle object that represents the size and position of an element in the DOM tree. The `height` property of this rectangle is used to retrieve the element's height.

**Pros and Cons**

* **`window.getComputedStyle`**:
	+ Pros: It provides more detailed information about the element's styles, which can be useful for layout calculations or validation.
	+ Cons: It can be slower than `getBoundingClientRect` because it needs to fetch additional data from the browser's style cache.
* **`node.getBoundingClientRect`**:
	+ Pros: It is generally faster and more lightweight than `getComputedStyle`, as it only retrieves the element's size and position.
	+ Cons: It does not provide detailed information about the styles, which can limit its usefulness for certain use cases.

**Library and Purpose**

In this benchmark, the `checkDisplay` function uses two libraries:

1. **`window.getComputedStyle`**: This method is part of the W3C's CSSOM (CSS Object Model) specification, which provides a standardized API for working with styles in web pages.
2. **`node.getBoundingClientRect`**: This method is also part of the DOM (Document Object Model) specification, which defines how elements are represented and manipulated in HTML documents.

**Special JS Features or Syntax**

There is no special JavaScript feature or syntax used in this benchmark beyond what's standard for modern browsers.

**Other Alternatives**

In addition to `window.getComputedStyle` and `node.getBoundingClientRect`, other methods can be used to retrieve an element's height, such as:

* **`element.offsetHeight`**: This method returns the element's offset height (the height of its content area), excluding any borders or padding.
* **`element.outerHeight`**: This method returns the element's outer height (including all borders and padding).
* **`element.style.height`**: This method returns the element's inline style property for the `height` attribute, which can be used to set the element's height programmatically.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to `window.getComputedStyle` and `node.getBoundingClientRect`.

Latest run results:

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

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

Browser/OS: Firefox 105 on Windows

View result in a separate tab

Test name	Executions per second
getComputedStyle	193.8 Ops/sec
getBoundingClientRect	360.3 Ops/sec

Related benchmarks:

window.getComputedStyle vs. getBoundingClientRect for height (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect

Created: 2 years ago by: Guest

Jump to the latest result

getComputedStyle

getBoundingClientRect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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