Run results for: Get Size Performance: getBoundingClientRect() vs CSS Height Property vs Other CSS Property

Run details:

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

Browser: Safari 16

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
getBoundingClientRect()	319.8 Ops/sec
CSS Height Property	288.5 Ops/sec
Other CSS Property	355.5 Ops/sec

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;