Benchmark: Get Size Performance: getBoundingClientRect() vs CSS Height Property vs Other CSS Property

HTML Preparation code:

<div id="record">
  <div>[01] min:<span id="amin"></span>, max:<span id="amax"></span></div>
  <div>[02] min:<span id="bmin"></span>, max:<span id="bmax"></span></div>
  <div>[03] min:<span id="cmin"></span>, max:<span id="cmax"></span></div>
</div>
<div class="container">
  <div id="target" class="target"></div>
</div>
<style>
  .target {
    --buffer: 2;
    --computedBuffer: calc(var(--buffer) * 1lh);
    --boxSize: calc(50cqb + (var(--computedBuffer) * 2));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--boxSize);
    font-size: 16px;
    line-height: 1.8;
    background-color: red;
    box-shadow: 0 0 0 2px black inset;
    rx: var(--boxSize);
  }
  .container {
    position: relative;
    container: base / size;
    height: 800px;
    animation: resize 2s linear infinite;
  }
  @keyframes resize {
    0% {
      height: 0px;
    }
    50% {
      height: 800px;
    }
    100% {
      height: 0px;
    }
  }
</style>

Script Preparation code:

var count = 100;
var targetElement = document.getElementById("target");
var amin = 9999;
var amax = 0;
var bmin = 9999;
var bmax = 0;
var cmin = 9999;
var cmax = 0;

Tests:

getBoundingClientRect()
var result; for(let i = 0;i < count; i++) { result = targetElement.getBoundingClientRect().height; if (result < amin) amin = result; if (amax < result) amax = result; } document.getElementById("amin").textContent = amin; document.getElementById("amax").textContent = amax;
CSS Height Property
var result; var targetStyle = window.getComputedStyle(targetElement); for(let i = 0;i < count; i++) { result = parseFloat(targetStyle.getPropertyValue("height")); if (result < bmin) bmin = result; if (bmax < result) bmax = result; } document.getElementById("bmin").textContent = bmin; document.getElementById("bmax").textContent = bmax;
Other CSS Property
var result; var targetStyle = window.getComputedStyle(targetElement); for(let i = 0;i < count; i++) { result = parseFloat(targetStyle.getPropertyValue("rx")); if (result < cmin) cmin = result; if (cmax < result) cmax = result; } document.getElementById("cmin").textContent = cmin; document.getElementById("cmax").textContent = cmax;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect()
CSS Height Property
Other CSS Property

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 14; Mobile; rv:129.0) Gecko/129.0 Firefox/129.0

Browser/OS: Firefox Mobile 129 on Android

View result in a separate tab

Test name	Executions per second
getBoundingClientRect()	4786.2 Ops/sec
CSS Height Property	4581.4 Ops/sec
Other CSS Property	5238.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance of three different approaches to retrieve the height of an element: `getBoundingClientRect()`, CSS Height Property, and Other CSS Property (specifically, `rx`).

**Approach 1: getBoundingClientRect()**

This approach uses the `getBoundingClientRect()` method, which returns a rectangle object with properties such as `height`. The benchmark performs this operation in a loop `count` number of times to measure its performance.

Pros:

* Simple and straightforward implementation
* Widely supported by modern browsers

Cons:

* May not be optimized for specific use cases or edge cases
* Can be slower than other approaches due to the overhead of getting and processing the rectangle object

**Approach 2: CSS Height Property**

This approach uses the `getPropertyValue()` method of the `ComputedStyle` interface to retrieve the height value from the style attribute. The benchmark performs this operation in a loop `count` number of times.

Pros:

* Fast and efficient, as it directly accesses the style attribute
* Can be optimized for specific use cases or edge cases

Cons:

* May not work correctly if the element's style is not set or is set to an invalid value
* Requires access to the computed style object, which can add overhead

**Approach 3: Other CSS Property (rx)**

This approach uses the `getPropertyValue()` method of the `ComputedStyle` interface to retrieve the `rx` property, which represents the radiusX value. The benchmark performs this operation in a loop `count` number of times.

Pros:

* Fast and efficient, as it directly accesses the style attribute
* Can be optimized for specific use cases or edge cases

Cons:

* Not widely supported, as `rx` is not a standard property and may not be recognized by all browsers
* May not work correctly if the element's style is not set or is set to an invalid value

**Library: getComputedStyle()**

The `getComputedStyle()` method is a part of the DOM API, which provides access to the computed style properties of an element. This library is used in Approaches 2 and 3.

Pros:

* Provides direct access to the element's style attributes
* Optimized for performance

Cons:

* May not work correctly if the element's style is not set or is set to an invalid value
* Can add overhead due to the need to parse and evaluate the CSS expression

**Special JavaScript Feature: none**

There are no special JavaScript features or syntax used in this benchmark.

**Alternatives**

Other approaches to retrieve the height of an element include:

1. Using a library like jQuery or Lodash, which provide methods for manipulating DOM elements.
2. Using a custom function that retrieves the height value from the element's style attribute using a combination of CSSOM and DOM APIs.
3. Using a different approach, such as using a layout engine like Blink or Gecko, to retrieve the height value.

However, these alternatives may not be supported by all browsers or may have performance implications, making `getBoundingClientRect()` a more widely supported and efficient option.

Related benchmarks:

Get Size Performance: getBoundingClientRect() vs CSS Height Property vs Other CSS Property (version: 16)

Comparing performance of: getBoundingClientRect() vs CSS Height Property vs Other CSS Property

Created: one year ago by: Registered User

Jump to the latest result

getBoundingClientRect()

CSS Height Property

Other CSS Property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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