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

Run details:

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

Browser: Chrome 121

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

ResizeObserver

19K/s

matchMedia

19K/s

resize event

7K/s

View exact numbers

Test name	Executions per second
✓ ResizeObserver	19,066 Ops/sec
matchMedia	18,810 Ops/sec
resize event	6,944 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();