Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ResizeObserver vs matchMedia (1)
(version: 0)
Comparing performance of:
ResizeObserver vs matchMedia
Created:
4 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 = 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 what's being tested in this benchmark. **What is being tested?** The benchmark compares the performance of two approaches to detect changes in screen size: 1. **ResizeObserver**: This is an API introduced by Chrome, Safari, and Firefox to observe changes in the size of an element or a region of the viewport. It allows developers to react to these changes without polling or using other techniques. 2. **matchMedia**: This is an API provided by Web APIs that allows you to query whether the media query you're interested in matches the current device's media features. **Options compared** The benchmark compares two options: * Using `ResizeObserver` to detect changes in screen size * Using `matchMedia` to detect changes in screen size **Pros and Cons of each approach:** **ResizeObserver:** Pros: * More efficient, as it only observes changes that occur when the element or region of the viewport actually changes. * Can be more reliable than polling, especially in scenarios where the change occurs suddenly. Cons: * Requires a supported browser, which might not be everyone's scenario. * May require additional setup and configuration to use correctly. **matchMedia:** Pros: * Widely supported by most modern browsers. * Easy to set up and use. * Allows for more fine-grained control over media queries. Cons: * Polls the browser at regular intervals, which can be inefficient if not necessary. * May incur performance costs due to the polling mechanism. **Library and purpose:** In this benchmark, no specific library is used. Both `ResizeObserver` and `matchMedia` are built-in APIs in modern browsers. No special JavaScript features or syntax are mentioned in this benchmark. **Other alternatives:** If you're interested in exploring other approaches for detecting changes in screen size, here are some alternatives: * **Event listeners**: Using event listeners (e.g., `window.resize`, `document.body.style.width`) can also detect changes in screen size. However, these methods may be less efficient than using APIs like `ResizeObserver` or `matchMedia`. * **Polling**: As mentioned earlier, polling the browser at regular intervals (e.g., every 100ms) can detect changes in screen size. However, this approach can be inefficient and may incur performance costs. * **IntersectionObserver**: This API is similar to `ResizeObserver`, but it's used for detecting when an element intersects with another element or a region of the viewport. Keep in mind that each of these alternatives has its own trade-offs, pros, and cons. The choice of which one to use depends on your specific use case, performance requirements, and target audience.
Related benchmarks:
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addListener()
addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addEventListener('change')
8x addEventListener('resize') VS matchMedia()
addEventListener('resize') with debounce + innerWidth VS matchMedia() + matchMedia.addListener()
ResizeObserver vs matchMedia 3x
Comments
Confirm delete:
Do you really want to delete benchmark?