clientHeight vs offsetHeight vs getBoundingClientRect
Date tested:
one year ago
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36
Test name
Executions per second
clientWidth / clientHeight
533139.1 Ops/sec
offsetWidth / offsetHeight
552730.7 Ops/sec
getBoundingClientRect
630311.3 Ops/sec
Benchmark definition (click to collapse):
HTML Preparation code:
<div id="el"> <h2>Lorem ipsum dolor sit amet</h2> </div>
Script Preparation code:
var el = document.getElementById("el");
Tests:
clientWidth / clientHeight
const { clientWidth, clientHeight } = el; const perim = (clientWidth + clientHeight) * 2;
offsetWidth / offsetHeight
const { offsetWidth, offsetHeight } = el; const perim = (offsetWidth + offsetHeight) * 2;
getBoundingClientRect
const { width, height } = el.getBoundingClientRect(); const perim = (width + height) * 2;
Open this result on MeasureThat.net