Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
mediawatch vs observ
(version: 0)
Comparing performance of:
media vs observ
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div> Hello </div>
Tests:
media
let value; const handleMatchChange = (val) => { value = 1; } const match3 = window.matchMedia('screen and (min-width: 1200px)') match3.addEventListener('change', handleMatchChange); for (let i = 500; i <= 1920; i++) { window.resizeTo(i, 1000) }
observ
let value; const observer = new ResizeObserver(() => { value = 1; }) observer.observe(document.body) 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
media
observ
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):
I'd be happy to help explain the JavaScript microbenchmark you've provided. **Overview** The benchmark compares two approaches for handling media queries: `window.matchMedia` and `ResizeObserver`. The test cases involve resizing a window with different screen widths, triggering changes in the media query's match state, and measuring the performance difference between the two approaches. **Benchmarked options** Two options are compared: 1. **`window.matchMedia`**: This is a built-in JavaScript API for querying media queries. It returns a `MatchMedia` object that provides methods for checking if the media query matches the current window's screen size and triggering changes when the match state changes. 2. **`ResizeObserver`**: This is a W3C standard API for observing changes in the viewport's size. It allows you to attach observers to elements or windows, which are notified when the size of the observed element or window changes. **Pros and cons** Here are some pros and cons of each approach: **`window.matchMedia`** Pros: * Easy to use and understand * Built-in API, so no additional libraries needed Cons: * May incur overhead due to event handling and DOM manipulations * Can be slower than `ResizeObserver` for large numbers of media queries **`ResizeObserver`** Pros: * More efficient and lightweight compared to `window.matchMedia` * Allows for more fine-grained control over when observers are notified Cons: * Requires more manual setup and configuration * May require additional libraries or polyfills if not supported by all browsers **Library usage** The test cases use the following library: * None, as both APIs are part of the browser's core functionality. **Special JS features/syntax** None mentioned in this benchmark. However, it's worth noting that `ResizeObserver` was introduced in ECMAScript 2018 (ES2018), so older browsers may not support it. The test cases appear to be designed for modern browsers like Firefox 119 and possibly other recent versions. **Other alternatives** If you're looking for alternative approaches for handling media queries, consider the following: * **`requestAnimationFrame`**: This API allows you to run code when the browser's animation frame is scheduled, which can be useful for handling media query changes. * **`requestIdleCallback`**: This API allows you to run code when the browser has idle time, which can help reduce CPU usage and improve performance. * **`Web Workers`**: These allow you to offload computationally intensive tasks to separate threads, which can help improve performance in certain scenarios. Keep in mind that each of these alternatives has its own trade-offs and use cases. The choice ultimately depends on your specific requirements and the constraints of your project.
Related benchmarks:
matchMedia vs clientWidth vs innerWidth
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addListener()
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addEventListener('change')
8x addEventListener('resize') VS matchMedia()
Comments
Confirm delete:
Do you really want to delete benchmark?