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

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:

Without JS
console.log("world")
MatchMedia with JS
const matchMedia = window.matchMedia("(min-width: 400px)"); matchMedia.addListener((query) => { if (query.matches) { console.log(true); } })
Resize
let currentWidth = window.innerWidth; window.addEventListener('resize', () => { currentWidth = window.innerWidth; }); if (currentWidth > 400) { console.log(true); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Without JS
MatchMedia with JS
Resize

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript benchmark test case on the website MeasureThat.net. The test aims to compare the performance of three different approaches for detecting changes in the window's width: using `addEventListener('resize')`, `matchMedia()` with an event listener, and CSS media queries.

**Benchmark Definition**

The main benchmark definition is:

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

This test case has three variants:

1. **`addEventListener('resize') + innerWidth`**: This approach uses the `window.addEventListener()` method to listen for resize events and updates the `innerWidth` property of the window object.
2. **`matchMedia()` with an event listener**: This approach uses the `window.matchMedia()` method to query for media queries and adds an event listener to the resulting `matchMedia` object to respond to changes in the matched state.
3. **CSS media queries**: This approach relies on CSS media queries to conditionally apply styles based on the window's width.

**Options Compared**

The test compares the performance of these three approaches:

* **Pros and Cons:**
	+ **`addEventListener('resize') + innerWidth`**:
		- Pros: Simple, widely supported, and can be used without adding extra libraries.
		- Cons: Can cause unnecessary work when the window is resized, as it constantly updates `innerWidth`.
	+ **`matchMedia()` with an event listener**:
		- Pros: More accurate and responsive than `addEventListener('resize') + innerWidth`, but still has some overhead due to the event listener.
		- Cons: Requires additional library (matching-media.js), which can add extra dependencies.
	+ **CSS media queries**:
		- Pros: Most efficient, as it only applies styles when the condition is met.
		- Cons: Less widely supported than JavaScript approaches, requires more complex setup.
* **Other Considerations:**
	+ The test also includes a "Without JS" variant, which measures the time taken by the browser to process the HTML and CSS without executing any JavaScript code.

**Library Usage**

The `matchMedia()` approach uses the matching-media.js library, which is not included in the benchmark definition but can be used to enable or disable media queries based on various conditions.

**Special JS Features or Syntax**

None of the approaches in this test rely on special JavaScript features or syntax, making them accessible to a wide range of developers.

**Alternatives**

Other alternatives for detecting changes in the window's width include:

* Using `window.addEventListener('resize', () => { ... })` with a more sophisticated resize detection strategy.
* Utilizing the Web API for responsive design, such as using the `vw` or `%` units to create flexible layouts.
* Leveraging modern JavaScript libraries like React or Angular for building responsive user interfaces.

The MeasureThat.net website provides an excellent platform for benchmarking and comparing the performance of different approaches to a specific problem.

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
Without JS	290531.1 Ops/sec
MatchMedia with JS	344720.2 Ops/sec
Resize	2131.4 Ops/sec

Related benchmarks:

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

Comparing performance of: Without JS vs MatchMedia with JS vs Resize

Created: 2 years ago by: Guest

Jump to the latest result

Without JS

MatchMedia with JS

Resize

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):