Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ResizeObserver vs matchMedia v1
(version: 0)
Comparing performance of:
ResizeObserver vs matchMedia
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div> Hello </div>
Tests:
ResizeObserver
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); for (let i = 500; i <= 1920; 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:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested, compared options, pros and cons, and other considerations. **Benchmark Definition** The benchmark measures the performance of two approaches to detect changes in the screen width: ResizeObserver and matchMedia (v1). **Options Being Compared** 1. **ResizeObserver**: This approach uses a custom ResizeObserver API to observe changes in the contentRect property of elements on the page. 2. **matchMedia (v1)**: This approach uses the `window.matchMedia` API to listen for changes in the media query 'screen and (min-width: 800px)'. **Pros and Cons** **ResizeObserver** Pros: * More precise and accurate, as it observes the contentRect property of elements. * Can be more efficient if only a specific set of elements needs to be observed. Cons: * Requires custom implementation, which can add overhead. * May not work well with older browsers that don't support ResizeObserver. **matchMedia (v1)** Pros: * Widely supported by modern browsers and easier to implement than ResizeObserver. * Can be used for more complex media queries. Cons: * Less precise and accurate, as it only checks the screen width at the time of initialization. * May not work well with dynamic content or older browsers that don't support matchMedia. **Library Usage** None of the provided benchmark code uses any third-party libraries. However, both approaches rely on browser-specific APIs: ResizeObserver is a modern API, while matchMedia (v1) is an older API that's still widely supported. **Special JS Feature/Syntax** None of the provided benchmark code uses any special JavaScript features or syntax, such as async/await, generators, or web workers. The code is straightforward and uses simple loops to iterate over a range of screen widths. **Other Considerations** * Both approaches have different overheads in terms of memory allocation and CPU usage. * ResizeObserver might be more suitable for applications that need to observe changes in multiple elements simultaneously. * matchMedia (v1) might be more suitable for applications that need to check media queries with complex conditions. **Alternative Approaches** Other alternatives for detecting screen width changes include: * Using the `window.innerWidth` and `window.innerHeight` properties, which are less accurate than ResizeObserver but widely supported. * Implementing a custom solution using JavaScript and DOM manipulation, which can be more efficient than matchMedia (v1) but requires more code. Keep in mind that this benchmark specifically compares two approaches: ResizeObserver and matchMedia (v1). Other alternatives may have different characteristics and might not be as relevant to the specific use case.
Related benchmarks:
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addListener()
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addEventListener('change')
8x addEventListener('resize') VS matchMedia()
ResizeObserver vs matchMedia extended
ResizeObserver vs matchMedia 3x
Comments
Confirm delete:
Do you really want to delete benchmark?