Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ResizeObserver vs matchMedia (5)
(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: 480px)') match1.addEventListener('change', handleMatchChange); const match2 = window.matchMedia('screen and (min-width: 640px)') match2.addEventListener('change', handleMatchChange); const match3 = window.matchMedia('screen and (min-width: 800px)') match3.addEventListener('change', handleMatchChange); const match4 = window.matchMedia('screen and (min-width: 1024px)') match4.addEventListener('change', handleMatchChange); const match5 = window.matchMedia('screen and (min-width: 1200px)') match5.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):
**Benchmark Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches to achieve specific tasks. The provided benchmark definition represents two test cases: "ResizeObserver" and "matchMedia". These tests aim to compare the performance of using the `ResizeObserver` API versus the `window.matchMedia()` function to detect changes in screen width. **Test Case 1: ResizeObserver** This test case creates a new instance of `ResizeObserver` and observes the document body. It then repeatedly resizes the window to different widths (500-1920) using the `resizeTo()` method, which updates the `contentRect.width` property of the observer's entry. The pros of this approach are: * Efficient use of memory, as the observer only captures changes in screen width * Direct access to the updated value without additional processing The cons are: * Requires manual handling of window resizing and content rect updates * May be sensitive to specific browser implementations or CSS rules affecting the content rectangle **Test Case 2: matchMedia** This test case creates multiple instances of `window.matchMedia()` with different media queries (min-width 480px, 640px, 800px, 1024px, and 1200px) and adds event listeners to detect changes in screen width. The pros of this approach are: * Easy to implement and maintain, as it uses a standardized API * Less prone to browser implementation variations or CSS rule dependencies The cons are: * Can be less efficient due to the overhead of multiple media queries and event listeners * May require more memory allocation for each matching media query instance **Library: ResizeObserver** ResizeObserver is a modern JavaScript API introduced in ECMAScript 2018, allowing you to observe changes in a target element's properties. In this benchmark, it is used to capture updates to the `contentRect.width` property of elements observing changes. The purpose of using ResizeObserver here is to demonstrate its performance advantages over traditional event-based approaches like matchMedia. **Special JS Feature/Syntax: Window.ResizeTo() and contentRect** These features are specific to the `resizeTo()` method, which allows windows to resize dynamically. The `contentRect` property is a built-in property of elements that provides information about their rendered content area. While not critical to understanding this benchmark, it's essential to recognize these features as they relate specifically to window resizing and element content areas. **Alternatives** Alternative approaches to measuring screen width changes include: 1. Using the `window.innerWidth` or `document.documentElement.clientWidth` properties. 2. Implementing custom event listeners for resize events (e.g., `window.addEventListener('resize', callback)`). 3. Utilizing other ARIA attributes like `aria-label` or `aria-labelledby`. Each of these alternatives has its pros and cons, which are not detailed in this explanation but can be explored further in the context of specific use cases. In conclusion, understanding the details of this benchmark is essential for choosing the most efficient approach to screen width change detection in JavaScript applications.
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?