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

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: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Linux

View result in a separate tab

Test name	Executions per second
ResizeObserver	3938.1 Ops/sec
matchMedia	3694.9 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`.

Related benchmarks:

ResizeObserver vs matchMedia (version: 0)

Comparing performance of: ResizeObserver vs matchMedia

Created: 5 years ago by: Guest

Jump to the latest result

ResizeObserver

matchMedia

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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