MeasureThat.net

Run results for: Get precise height : getComputedStyle vs getBoundingClientRect vs innerHeight

Go to the benchmark
Run details:
Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/128 Mobile/15E148 Version/15.0
Mobile Safari 15
iOS 17.5.1
Mobile
9 months ago
Test name Executions per second
getComputedStyle 501.1 Ops/sec
getBoundingClientRect 564.5 Ops/sec
clientHeight 1290.9 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="foo"></div>
Tests:

  • getComputedStyle

    ​x
     
    var i = 5000;
    while (i--) {
        checkDisplay('foo');
    }
    ​
    function checkDisplay(id) {
        return window.getComputedStyle(document.getElementById(id), null).getPropertyValue("height").slice(0, -2);
    }

  • getBoundingClientRect

     
    var i = 5000;
    while (i--) {
        checkDisplay('foo');
    }
    ​
    function checkDisplay(id) {
        return document.getElementById(id).getBoundingClientRect().height;
    }
    ​

  • clientHeight

     
    var i = 5000;
    while (i--) {
        checkDisplay('foo');
    }
    ​
    function checkDisplay(id) {
        return document.getElementById(id).clientHeight;
    }