Benchmark: addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addListener() VS CSS matchMedia

HTML Preparation code:

<style>
  #before:before {
  	content: "a";
 	 display: none;
  }
  @media(min-width: 200px) {
  	#body {
  		background: red;
  	content: "b";
  	}
  }
  @media(min-width: 600px) {
  	#body {
  		background: blue;
  	content: "c";
  	}
  }
  @media(min-width: 1000px) {
  	#body {
  		background: yellow;
  	content: "d";
  	}
  }
</style>
<div id="body">
</div>

Script Preparation code:

console.log("hello, ")

Tests:

CSS matchMedia
console.log("world!")
JS MatchMedia
const matchMedia = window.matchMedia("(min-width: 400px)"); matchMedia.addListener((query) => { console.log("world!") })
Resize
window.addEventListener('resize', () => { console.log("world!") });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
CSS matchMedia
JS MatchMedia
Resize

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark tests three different approaches to detect screen width changes in JavaScript:

1. `addEventListener('resize') + innerWidth`
2. `matchMedia()` with a listener
3. CSS `matchMedia` query

These approaches are compared to measure their performance differences.

**Options Compared**

1. **`addEventListener('resize') + innerWidth`**: This approach uses the browser's event system to listen for screen resize events and then checks the current window width using `innerWidth`. The `+` operator is used to chain these two operations.
2. **`matchMedia()` with a listener**: This approach uses the `window.matchMedia()` API to create a match media query, which returns a `MatchMedia` object that can be queried for its match state (e.g., whether it matches a specific media query). A listener function is also attached to this object to execute when the query changes.
3. **CSS `matchMedia` query**: This approach uses CSS to define a media query that checks the screen width. When this query is matched, a style rule is applied to an element (`#body` in this case).

**Pros and Cons of Each Approach**

1. **`addEventListener('resize') + innerWidth`**:
	* Pros: Easy to understand, no dependencies on external libraries.
	* Cons: Requires manual event handling, can lead to performance issues if not implemented correctly.
2. **`matchMedia()` with a listener**:
	* Pros: More efficient than the first approach, as it doesn't require manual event handling.
	* Cons: Depends on the `window.matchMedia()` API, which might not be supported in older browsers.
3. **CSS `matchMedia` query**:
	* Pros: Fast and efficient, as it uses CSS to query the media query state.
	* Cons: Requires knowledge of CSS media queries and can lead to performance issues if not implemented correctly.

**Library Used**

The `window.matchMedia()` API is a built-in API in modern browsers that allows you to create match media queries. The `matchMedia.addListener()` function is used to attach a listener to this object, allowing the code to react to changes in the query state.

**Special JS Features/Syntax**

None mentioned explicitly in the provided benchmark definitions. However, it's worth noting that some of these approaches may rely on modern JavaScript features like ES6 syntax or CSS media queries, which might not be compatible with older browsers or environments.

**Other Alternatives**

1. **Using `window.addEventListener('resize', ...)` directly**: This approach would eliminate the need for an additional object (e.g., `matchMedia`) and use the browser's event system more directly.
2. **Using a third-party library**: Depending on the specific requirements of the application, a third-party library like `mediaquery.js` or `match-media` could be used to simplify the implementation and improve performance.

Keep in mind that these alternatives might come with trade-offs in terms of compatibility, complexity, or performance characteristics.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
CSS matchMedia	296094.0 Ops/sec
JS MatchMedia	317263.0 Ops/sec
Resize	1370.9 Ops/sec

Related benchmarks:

addEventListener('resize') + innerWidth VS matchMedia() + matchMedia.addListener() VS CSS matchMedia (version: 0)

Comparing performance of: CSS matchMedia vs JS MatchMedia vs Resize

Created: 2 years ago by: Guest

Jump to the latest result

CSS matchMedia

JS MatchMedia

Resize

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):