Benchmark: resize event listener vs resizeObserver

HTML Preparation code:

<div class="container">
</div>

Tests:

resizeObserver (body)
this._resizeWatcher = new ResizeObserver(entry => { this._onResize(); }); this._resizeWatcher.observe(document.body); function _onResize() { document.querySelector('.container').style.setProperty('--viewport-width', window.innerWidth); } for (let i = 360; i <= 1920; i++) { window.resizeTo(i, 1000) }
resizeObserver (container)
this._resizeWatcher = new ResizeObserver(entry => { this._onResize(); }); this._resizeWatcher.observe(document.querySelector('.container')); function _onResize() { document.querySelector('.container').style.setProperty('--viewport-width', window.innerWidth); } for (let i = 360; i <= 1920; i++) { window.resizeTo(i, 1000) }
window resize event listener
document.querySelector('.container').style.setProperty('--viewport-width', window.innerWidth); window.addEventListener('resize', _onResize); function _onResize() { document.querySelector('.container').style.setProperty('--viewport-width', window.innerWidth); } for (let i = 360; i <= 1920; i++) { window.resizeTo(i, 1000) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
resizeObserver (body)
resizeObserver (container)
window resize event listener

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
resizeObserver (body)	23455.5 Ops/sec
resizeObserver (container)	23563.2 Ops/sec
window resize event listener	7593.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark test case, which compares three approaches: ResizeObserver with different element scopes (body or container) and the traditional window resize event listener.

**Tested Approaches**

1. **ResizeObserver (container)**: This approach uses the `ResizeObserver` API to observe the `.container` element. When the element's size changes, the `_onResize()` function is called.
2. **ResizeObserver (body)**: Similar to the previous approach, but observes the entire `<div class="container">` element instead of just its container.
3. **Window Resize Event Listener**: This approach uses the traditional `window.resize` event listener to call the `_onResize()` function whenever the window is resized.

**Options Compared**

The test compares the performance of each approach under different conditions:

* The number of executions per second (ExecutionsPerSecond) measures how often the code executes.
* The device platform and operating system are specified to ensure the results are consistent across different environments.

**Pros and Cons**

1. **ResizeObserver (container)**:
	* Pros: More efficient, as it only observes the element that needs to be resized.
	* Cons: May not work as expected if the element's size is changed dynamically using other means.
2. **ResizeObserver (body)**:
	* Pros: Similar to the previous approach, but allows observing the entire container element.
	* Cons: More computationally expensive due to the need to observe a larger area.
3. **Window Resize Event Listener**:
	* Pros: Easy to implement and well-supported across browsers.
	* Cons: May be less efficient than other approaches, as it requires additional event handling.

**Library and Syntax**

The test case uses the `ResizeObserver` API, which is a modern JavaScript API for observing changes in an element's size or appearance. The API provides a more efficient and flexible way to handle resize events compared to traditional event listeners.

There are no special JS features or syntax used in this benchmark, as it focuses on comparing different approaches to handling resize events.

**Alternatives**

Other alternatives for handling resize events include:

* Using the `window.addEventListener('resize', ...)` method with a callback function.
* Utilizing CSS media queries and JavaScript event listeners to handle responsive design scenarios.
* Implementing custom event listeners using Web Workers or other parallel computing techniques.

Related benchmarks:

resize event listener vs resizeObserver (version: 3)

Comparing performance of: resizeObserver (body) vs resizeObserver (container) vs window resize event listener

Created: 2 years ago by: Registered User

Jump to the latest result

resizeObserver (body)

resizeObserver (container)

window resize event listener

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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