Benchmark: ResizeObserver vs matchMedia

HTML Preparation code:

<div>
  Hello
</div>

Tests:

ResizeObserver
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) }

Historical Performance Data aggregated from 78 community runs

Desktop Results:

Chrome 65 runs

ResizeObserver

6K/s

matchMedia

6K/s

View exact numbers

✓ ResizeObserver: 6,058 ops/sec
• matchMedia: 5,945 ops/sec

Firefox 13 runs

ResizeObserver

6K/s

matchMedia

5K/s

Fastest: ResizeObserver (1.1x faster)

View exact numbers

✓ ResizeObserver: 5,588 ops/sec
• matchMedia: 5,013 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ResizeObserver
matchMedia

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Windows

View result in a separate tab

ResizeObserver

18K/s

matchMedia

16K/s

View exact numbers

Test name	Executions per second
✓ ResizeObserver	17,964 Ops/sec
matchMedia	15,996 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing two different approaches to detecting screen size changes: `ResizeObserver` and `matchMedia`. The tests are designed to measure the performance difference between these two methods.

**Options compared:**

1. **ResizeObserver**: A new API introduced in JavaScript, which allows observing changes to an element's size and layout. It uses a callback function to notify when the observed element's size has changed.
2. **matchMedia**: An existing API that allows querying the match media query rules defined on the window object. When a media query rule is activated or deactivated, it fires an event, which can be listened to using event listeners.

**Pros and Cons:**

* **ResizeObserver**:
	+ Pros: Efficient, lightweight, and easy to use.
	+ Cons: Limited browser support (currently only in Chrome and Firefox), requires more JavaScript code compared to `matchMedia`.
* **matchMedia**:
	+ Pros: Widespread browser support, simpler to use, and no additional JavaScript code required.
	+ Cons: Less efficient than `ResizeObserver`, can be slower due to the overhead of event listeners.

**Library and purpose:**

In both test cases, `matchMedia` is used in conjunction with an event listener (`handleMatchChange`). The library here is not a dedicated one but rather part of the browser's API. However, there are libraries available that provide additional functionality for working with media queries, such as `match-media`.

**Special JS feature or syntax:**

None mentioned.

**Other considerations:**

When choosing between these two approaches, consider the specific use case and performance requirements. If you need to observe changes in multiple elements or require more precise control over the observed elements, `ResizeObserver` might be a better choice. However, if you need widespread browser support and don't require the same level of customization, `matchMedia` is likely sufficient.

**Alternatives:**

1. **Window.onresize**: A legacy API that fires when the window's size changes. While it's not as efficient or powerful as `ResizeObserver`, it can be a viable alternative in some cases.
2. **Element.addEventListener('layoutchange')**: Some browsers (e.g., Firefox) fire an event called `layoutchange` when the layout of an element changes. This can be used to detect size changes, but its support is limited compared to `ResizeObserver`.

Keep in mind that these alternatives may not offer the same level of control or performance as `ResizeObserver`.

ResizeObserver vs matchMedia (version: 0) Benchmark.js

Comparing performance of: `ResizeObserver vs matchMedia`

Created: 5 years ago by: Guest

Go to the latest result

ResizeObserver

matchMedia

Historical Performance Data aggregated from 78 community runs

Desktop Results:

Chrome 65 runs

Firefox 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

ResizeObserver vs matchMedia (version: 0) Benchmark.js

Comparing performance of: ResizeObserver vs matchMedia

Created: 5 years ago by: Guest

Go to the latest result

ResizeObserver

matchMedia

Historical Performance Data aggregated from 78 community runs

Desktop Results:

Chrome 65 runs

Firefox 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `ResizeObserver vs matchMedia`