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

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

This benchmark compares using `addEventListener('resize')` with window.innerWidth versus window.matchMedia with it's`addListener()` function to see which is faster.

Comparing performance of: matchMedia + addListener vs resize + innerWidth

Created: one year ago by: Guest

Jump to the latest result

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>

Tests:

matchMedia + addListener
const matchMedia = window.matchMedia("(min-width: 400px)"); matchMedia.addListener((query) => { if (query.matches) { console.log(true); } })
resize + innerWidth
let currentWidth = window.innerWidth; function debounce(func){ var timer; return function(event){ if(timer) clearTimeout(timer); timer = setTimeout(func,100,event); }; } window.addEventListener("resize",debounce(function(e){ 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
matchMedia + addListener
resize + innerWidth

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
matchMedia + addListener	331777.8 Ops/sec
resize + innerWidth	1481.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark being tested is the performance difference between two approaches for handling screen size changes:

1. Using `window.matchMedia` with its `addListener()` function to check for media queries.
2. Using `window.addEventListener('resize')` with a debounced function to update the current width.

**Library and Purpose**

In this benchmark, the `matchMedia` API is used as the primary method for handling screen size changes. The `matchMedia` API allows you to query whether a given media query matches the current state of the browser. In this case, the media query `(min-width: 400px)` is used to check if the window width is greater than or equal to 400 pixels.

**Debouncing**

The debouncing technique is used in the second approach (`resize + innerWidth`). Debouncing is a design pattern that delays the execution of a function until a specified amount of time has passed since the last invocation. In this case, the `debounce` function is used to delay the update of the current width by 100ms.

**Options Compared**

The two approaches being compared are:

1. **matchMedia + addListener**: This approach uses `window.matchMedia` to check for media queries and listens for changes using its `addListener()` method.
2. **resize + innerWidth**: This approach uses `window.addEventListener('resize')` to listen for window resize events and updates the current width using a debounced function.

**Pros and Cons**

Here are some pros and cons of each approach:

**matchMedia + addListener**

Pros:

* More accurate results, as it checks for media queries explicitly.
* Can handle multiple media queries simultaneously.

Cons:

* May be slower due to the overhead of listening for media query changes.
* Requires more setup, as you need to define the media query and its associated logic.

**resize + innerWidth**

Pros:

* Faster execution, as it uses a simple event listener.
* Less setup required, as it only needs to define the resize event handler.

Cons:

* May not be as accurate, as it relies on the browser's built-in window resize detection.
* Can lead to multiple updates if the user quickly resizes the window.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Accuracy: If you need precise results, `matchMedia + addListener` may be a better choice. However, if speed is more important, `resize + innerWidth` might be sufficient.
* Setup complexity: If you have complex media query logic or need to handle multiple queries, `matchMedia + addListener` may require more setup time.

**Alternatives**

If you're not satisfied with the results of this benchmark or want to explore alternative approaches, consider the following options:

* **requestAnimationFrame**: This API allows you to execute animations and other tasks at a specific frame rate. It can be used for smoother animations and updates.
* **Web Workers**: If you need to perform complex computations or handle large datasets, Web Workers can help improve performance by offloading tasks to separate threads.

In conclusion, the choice between `matchMedia + addListener` and `resize + innerWidth` depends on your specific requirements and priorities. MeasureThat.net provides a valuable resource for comparing these approaches in a controlled environment, helping you make informed decisions about optimizing your JavaScript code.

Related benchmarks: