Hallo Welt
Date tested:
one year ago
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Test name
Executions per second
matchMedia + addListener
198560.7 Ops/sec
normal thing
1643.7 Ops/sec
Benchmark definition (click to collapse):
HTML Preparation code:
<style> #before:before { content: "a"; display: none; } @media(min-width: 200px) { #body { background: red; content: "b"; } } @media(min-width: 600px) { #body { background: blue; content: "c"; } } @media(min-width: 1000px) { #body { background: yellow; content: "d"; } } </style> <div id="body"> </div>
Tests:
matchMedia + addListener
const matchMedia = window.matchMedia("(min-width: 400px)"); matchMedia.addListener((query) => { if (query.matches) { console.log(true); } })
normal thing
let currentWidth = window.innerWidth; window.addEventListener('resize', () => { if(window.innerWidth > 400) { console.log(true) } });
Open this result on MeasureThat.net