Benchmark: ResizeObserver vs matchMedia 3x

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 = 300; i <= 2000; i++) { window.resizeTo(i, 1000) } for (let i = 300; i <= 2000; i++) { window.resizeTo(i, 1000) } for (let i = 300; i <= 2000; 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) } for (let i = 300; i <= 2000; i++) { window.resizeTo(i, 1000) } for (let i = 300; i <= 2000; 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: 7 months ago)

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
ResizeObserver	4389.1 Ops/sec
matchMedia	4516.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches for handling screen size changes: `ResizeObserver` and `matchMedia`. The goal is to measure which approach is faster.

**Options Compared**

1. **ResizeObserver**: A Web API that allows you to observe changes in an element's content rectangle, providing a way to react to screen size changes.
2. **matchMedia**: A Web API that provides a simple way to query the media query state (e.g., whether the screen meets certain conditions).

**Pros and Cons of Each Approach**

1. **ResizeObserver**:
	* Pros:
		+ Provides more detailed information about the element's content rectangle changes.
		+ Can be used to observe changes in other elements or attributes.
	* Cons:
		+ Requires creating a new `ResizeObserver` instance for each observation, which can lead to memory allocation and deallocation overhead.
2. **matchMedia**:
	* Pros:
		+ Simple and lightweight, with minimal overhead.
		+ Easy to use and understand.
	* Cons:
		+ Only provides information about the media query state (e.g., whether the screen meets certain conditions).
		+ May not be as flexible as `ResizeObserver` for observing changes in elements.

**Library/Feature Used**

In both test cases, the following libraries/features are used:

* **ResizeObserver**: A Web API built into modern browsers.
* **matchMedia**: A Web API also built into modern browsers.

No external libraries or frameworks are mentioned.

**Special JS Features/Syntax**

The benchmark uses some special JavaScript features and syntax, including:

* **Arrow functions**: Used in the `handleMatchChange` function to define a concise way of defining small anonymous functions.
* **Template literals**: Used in the HTML preparation code to create multiline strings with embedded expressions (e.g., `<div>\r\n  Hello\r\n</div>`).

**Other Alternatives**

If you wanted to write this benchmark yourself, you could use other approaches, such as:

1. Using `requestAnimationFrame` or `setTimeout` to simulate screen size changes.
2. Creating a custom implementation of the `ResizeObserver` API using Web Workers or WebAssembly.
3. Using a different library or framework for handling media queries (e.g., jQuery's `matchMedia` plugin).

However, using the built-in `ResizeObserver` and `matchMedia` APIs is likely to be the most efficient and straightforward approach.

Related benchmarks:

ResizeObserver vs matchMedia 3x (version: 0)

Comparing performance of: ResizeObserver vs matchMedia

Created: 2 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):