Benchmark: setIsMinViewportSize on resize event vs matchMedia vs ResizeObserver

HTML Preparation code:

<div>
  Hello
</div>

Script Preparation code:

isMinViewportSize = false;
minViewportSize = 500

function setIsMinViewportSize(value) {
    if (isMinViewportSize !== value) {
        isMinViewportSize = value;
        // simulate rendering
        getComputedStyle(document.body)
    }
}

function resize() {
    let direction = 'up';
    for (let i = 400; direction === 'up' || i > 400; direction === 'up' ? i++ : i--) {
        window.resizeTo(i, 1000)
        if (i === 600) { // up 200, down 200
            direction = 'down';
        }
    }
}

Tests:

resize event
const handleResize = event => { setIsMinViewportSize(window.innerWidth >= minViewportSize); } window.addEventListener("resize", handleResize); resize();
matchMedia
const handleMatchChange = ({ matches }) => { setIsMinViewportSize(matches); } const match1 = window.matchMedia(`screen and (min-width: ${minViewportSize}px)`) match1.addEventListener('change', handleMatchChange); resize();
ResizeObserver
const observer = new ResizeObserver(entries => { setIsMinViewportSize(entries[0].contentRect.width >= minViewportSize) }) observer.observe(document.body) resize();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
resize event
matchMedia
ResizeObserver

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: 2 months ago)

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

Browser/OS: Chrome 121 on Linux

View result in a separate tab

Test name	Executions per second
resize event	6943.9 Ops/sec
matchMedia	18809.7 Ops/sec
ResizeObserver	19065.6 Ops/sec

setIsMinViewportSize on resize event vs matchMedia vs ResizeObserver (version: 2)

Comparing performance of: resize event vs matchMedia vs ResizeObserver

Created: one year ago by: Registered User

Jump to the latest result

resize event

matchMedia

ResizeObserver

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A