Benchmark: getBoundingClientRect cashing

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

const testEl = document.getElementById('test');
var a = {
	get testRect() {
      return testEl.getBoundingClientRect();
    },
    set testRect(val) {
    }
}

Tests:

No caсh
let rectData = a.testRect; let height = a.testRect.height; let width = a.testRect.width;
Caсhing
let rectData = a.testRect; let height = rectData.height; let width = rectData.width;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
No caсh
Caсhing

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Linux

View result in a separate tab

Test name	Executions per second
No caсh	49019.0 Ops/sec
Caсhing	146903.7 Ops/sec

Related benchmarks:

clientWidth / clientHeight vs. getBoundingClientRect()
Dom element measure #1
ssssdsaddffvfggggfffdssff
Test Different ways of getting width
clientWidth / clientHeight vs. getBoundingClientRect()awe
offsetWidth vs. getBoundingClientRect().width
clientHeight vs offsetHeight vs getBoundingClientRect height only
clientWidth / clientHeight vs. getBoundingClientRect() vs. getComputedStyle
querySelector3

getBoundingClientRect cashing (version: 1)

Comparing performance of: No caсh vs Caсhing

Created: one year ago by: Registered User

Jump to the latest result

No caсh

Caсhing

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A