Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 OPR/96.0.0.0 (Edition Yx 05)
Opera 96
Mac OS X 10.15.7
Desktop
one year ago
Test name Executions per second
ResizeObserver 4721.2 Ops/sec
matchMedia 4595.2 Ops/sec
HTML Preparation code:
AخA
 
1
<div>
2
  Hello
3
</div>
Tests:
  • ResizeObserver

    x
     
    let value;
    const observer = new ResizeObserver(entries => {
        value = entries[0].contentRect.width;
    })
    observer.observe(document.body)
    for (let i = 500; i <= 1920; i++) {
        window.resizeTo(i, 1000)
    }
  • matchMedia

     
    let value;
    const handleMatchChange = (val) => {
        value = val;
    }
    const match1 = window.matchMedia('screen and (min-width: 800px)')
    match1.addEventListener('change', handleMatchChange);
    const match2 = window.matchMedia('screen and (min-width: 480px)')
    match2.addEventListener('change', handleMatchChange);
    const match3 = window.matchMedia('screen and (min-width: 1200px)')
    match3.addEventListener('change', handleMatchChange);
    for (let i = 500; i <= 1920; i++) {
        window.resizeTo(i, 1000)
    }