Run results for: setIsMinViewportSize on resize event vs matchMedia vs ResizeObserver

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.2 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 16

Operating system: iOS 16.2

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
resize event	6440.2 Ops/sec
matchMedia	12722.0 Ops/sec
ResizeObserver	10416.6 Ops/sec

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();