Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ResizeObserver vs matchMedia extended
(version: 0)
ResizeObserver vs matchMedia
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
let value; const observer = new ResizeObserver(entries => { value = entries[0].contentRect.width; }) observer.observe(document.body) for (let i = 0; i <= 1920; i++) { window.resizeTo(i, 1000) }
matchMedia
let value; const handleMatchChange = (val) => { value = val; } const match1 = window.matchMedia('screen and (min-width: 0px) and (max-width: 479px)') match1.addEventListener('change', handleMatchChange); const match2 = window.matchMedia('screen and (min-width: 480px) and (max-width: 767px)') match2.addEventListener('change', handleMatchChange); const match3 = window.matchMedia('screen and (min-width: 768px) and (max-width: 1023px)') match3.addEventListener('change', handleMatchChange); const match4 = window.matchMedia('screen and (min-width: 1024px) and (max-width: 1199px)') match4.addEventListener('change', handleMatchChange); const match5 = window.matchMedia('screen and (min-width: 1200px) and (max-width: 1339px)') match5.addEventListener('change', handleMatchChange); const match6 = window.matchMedia('screen and (min-width: 1340px)') match6.addEventListener('change', handleMatchChange); for (let i = 0; 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 JSON data and explain what is being tested. **Benchmark Overview** The benchmark compares the performance of two APIs: 1. `ResizeObserver`: A web API introduced in HTML5, which allows you to observe changes to an element's size and shape. 2. `matchMedia`: An API used to query the match media query feature, which allows you to test different screen sizes and devices. **Test Cases** The benchmark consists of two individual test cases: 1. **ResizeObserver** * The test creates a new `ResizeObserver` instance and observes changes to the body element's width. * It then iterates over a range of values (0-1920) and resizes the window to each value, updating the observer to re-run its callback function whenever the window is resized. 2. **matchMedia** * The test creates multiple instances of `window.matchMedia` with different media queries, such as `(min-width: 480px)` and `(max-width: 767px)`. * For each query, it adds an event listener to listen for changes in the media query match. * It then iterates over a range of values (0-1920) and resizes the window to each value, updating each `matchMedia` instance accordingly. **Options Compared** The benchmark is comparing two approaches: 1. **ResizeObserver**: A direct, straightforward approach that uses the `ResizeObserver` API to observe changes to the element's size. 2. **matchMedia extended**: An extension of the traditional `matchMedia` API, which allows for more complex media queries and improved performance. **Pros and Cons** Here are some pros and cons of each approach: **ResizeObserver** Pros: * Simple and straightforward implementation * No additional dependencies required Cons: * May be slower than the extended `matchMedia` API due to its overhead **matchMedia extended** Pros: * Improved performance compared to traditional `matchMedia` * Allows for more complex media queries, making it a better fit for certain use cases Cons: * Requires additional dependencies and setup * May have higher overhead due to the complexity of the media queries **Library: matchMedia** The `matchMedia` library is not explicitly mentioned in the provided JSON data. However, it's likely that the extended `matchMedia` API relies on some underlying libraries or frameworks to provide its improved performance. **Special JavaScript Features/Syntax** None are explicitly mentioned in the provided benchmark data. **Other Alternatives** If you're interested in exploring alternative approaches, here are a few options: 1. **CSS Media Queries**: You can use CSS media queries to achieve similar results without relying on the `matchMedia` API. 2. **Resize Polyfill**: A polyfill for the `ResizeObserver` API that provides fallback behavior for older browsers. 3. **Other Resize Observer Alternatives**: Depending on your specific requirements, you might consider using other resize observer libraries or frameworks, such as Resize.js or IntersectionObserver. Keep in mind that each alternative has its own trade-offs and may not offer the same performance benefits as the `matchMedia` extended API.
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 3x
Comments
Confirm delete:
Do you really want to delete benchmark?