Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
ResizeObserver vs matchMedia 3x
(version: 0)
Benchmark.js
Comparing performance of:
ResizeObserver vs matchMedia
Created:
3 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
ResizeObserver
matchMedia
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
11 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618411" width="100%" height="500px"></iframe>
matchMedia
5K/s
ResizeObserver
4K/s
View exact numbers
Test name
Executions per second
✓
matchMedia
4,516 Ops/sec
ResizeObserver
4,389 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addEventListener('change')
Comments
Confirm delete:
Do you really want to delete benchmark?