Benchmark: setIsMinViewportSize on resize event vs matchMedia vs matchMedia inside Resize

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();
matchMedia inside Resize
const handleResize = event => { setIsMinViewportSize(window.matchMedia(`screen and (min-width: ${minViewportSize}px)`).matches) } window.addEventListener("resize", handleResize); resize();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
resize event
matchMedia
matchMedia inside Resize

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

setIsMinViewportSize on resize event vs matchMedia vs matchMedia inside Resize (version: 0)

Comparing performance of: resize event vs matchMedia vs matchMedia inside Resize

Created: 10 months ago by: Guest

Jump to the latest result

resize event

matchMedia

matchMedia inside Resize

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results