Benchmark: window.getComputedStyle inline vs batched

HTML Preparation code:

<style>
    #foo {overflow-y: auto}
</style>
<div id="foo">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div id="bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Script Preparation code:

var regex = /(auto|scroll)/;

function parents(node, ps) {
    if (node.parentNode === null) {
        return ps;
    }

    return parents(node.parentNode, ps.concat([node]));
};

/** batched */
function scroll_batched(element) {
    var style = window.getComputedStyle(element, null);
    return regex.test(style.getPropertyValue("overflow") + style.getPropertyValue("overflow-y") + style.getPropertyValue("overflow-x"));
}

function scrollparent_batched(element) {
    var ps = parents(element.parentNode, []);

    for (var i = 0; i < ps.length; i += 1) {
        if (scroll_batched(ps[i])) {
            return ps[i];
        }
    }
}

/** inline */

function scroll_inline(element) {
    return regex.test(window.getComputedStyle(element, null).getPropertyValue("overflow") + window.getComputedStyle(element, null).getPropertyValue("overflow-y") + window.getComputedStyle(element, null).getPropertyValue("overflow-x"));
}

function scrollparent_inline(element) {
    var ps = parents(element.parentNode, []);

    for (var i = 0; i < ps.length; i += 1) {
        if (scroll_inline(ps[i])) {
            return ps[i];
        }
    }

}

Tests:

inline getComputedStyle
var scrollparentElement = scrollparent_inline(document.getElementById("bar")); console.assert(scrollparentElement === document.getElementById("foo"), "foo should be the scroll parent, instead got %0", scrollparentElement);
batched getComputedStyle
var scrollparentElement = scrollparent_batched(document.getElementById("bar")); console.assert(scrollparentElement === document.getElementById("foo"), "foo should be the scroll parent, instead got %0", scrollparentElement);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
inline getComputedStyle
batched getComputedStyle

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
inline getComputedStyle	57737.5 Ops/sec
batched getComputedStyle	79927.0 Ops/sec

window.getComputedStyle inline vs batched (version: 0)

Comparing performance of: inline getComputedStyle vs batched getComputedStyle

Created: one year ago by: Registered User

Jump to the latest result

inline getComputedStyle

batched getComputedStyle

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A