Benchmark: ResizeObserver vs ResizeObserver polyfill

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) }
ResizeObserver polyfill
class ResizeObserver { constructor(callback) { this.observables = []; this.boundCheck = this.check.bind(this); this.boundCheck(); this.callback = callback; } observe(el) { if (this.observables.some((observable) => observable.el === el)) { return; } const newObservable = { el: el, size: { height: el.clientHeight, width: el.clientWidth } } this.observables.push(newObservable); } unobserve(el) { this.observables = this.observables.filter((obj) => obj.el !== el); } disconnect() { this.observables = []; } check() { const changedEntries = this.observables.filter((obj) => { const currentHeight = obj.el.clientHeight; const currentWidth = obj.el.clientWidth; if (obj.size.height !== currentHeight || obj.size.width !== currentWidth) { obj.size.height = currentHeight; obj.size.width = currentWidth; return true; } }).map((obj) => obj.el); if (changedEntries.length > 0) { this.callback(changedEntries); } window.requestAnimationFrame(this.boundCheck); } } 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) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ResizeObserver
ResizeObserver polyfill

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
ResizeObserver	6474.0 Ops/sec
ResizeObserver polyfill	6265.3 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!

**Benchmark Overview**

The provided benchmark compares two approaches to creating a ResizeObserver in modern JavaScript: the built-in `ResizeObserver` API and a polyfill for older browsers.

**Options Compared**

There are two main options being compared:

1. **Built-in `ResizeObserver` API**: This approach uses the native `ResizeObserver` API, which is supported by modern browsers (e.g., Chrome 122). The `ResizeObserver` class allows you to observe changes in an element's size and trigger callbacks when those changes occur.
2. **Polyfill for older browsers**: This approach uses a polyfill library to simulate the behavior of `ResizeObserver` in older browsers that don't support it natively.

**Pros and Cons**

### Built-in `ResizeObserver` API

Pros:

* **Performance**: The built-in API is optimized for performance and should be faster than any polyfill.
* **Native Support**: It's supported by modern browsers, making it a great choice for new projects.
* **Simplified Code**: The API provides a simple and intuitive way to observe changes in an element.

Cons:

* **Browser Compatibility**: It may not work in older browsers that don't support the `ResizeObserver` API.
* **Limited Control**: You might have limited control over the polyfill's behavior, as it's implemented by someone else.

### Polyfill for older browsers

Pros:

* **Wide Browser Support**: The polyfill allows you to use the `ResizeObserver` API in older browsers that don't support it natively.
* **Customization**: With a polyfill, you can customize its behavior to suit your specific needs.

Cons:

* **Performance Overhead**: Polyfills can introduce performance overhead due to the additional complexity and logic.
* **Code Size**: The polyfill code might be larger than the native implementation, which could affect page load times.

**Library Usage**

In this benchmark, a library is used as a polyfill for the `ResizeObserver` API. However, the specific library name is not provided in the documentation.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax being tested in this benchmark. The code is straightforward and focused on comparing two approaches to creating a ResizeObserver.

**Other Alternatives**

If you're interested in exploring alternative approaches for observing element size changes, here are some options:

1. **Event listeners**: You can use event listeners (e.g., `resize`, `scroll`) to detect changes in an element's size.
2. **MutationObserver**: The MutationObserver API allows you to observe changes in an element's attributes and properties, including its size.
3. **RequestAnimationFrame**: This technique involves using `RequestAnimationFrame` to repeatedly call a function that checks the element's size.

These alternatives might offer trade-offs in terms of performance, browser compatibility, or code complexity compared to the built-in `ResizeObserver` API or polyfills.

Related benchmarks:

ResizeObserver vs ResizeObserver polyfill (version: 0)

Comparing performance of: ResizeObserver vs ResizeObserver polyfill

Created: 2 years ago by: Registered User

Jump to the latest result

ResizeObserver

ResizeObserver polyfill

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):