Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
ResizeObserver vs ResizeObserver polyfill
(version: 0)
Benchmark.js
Comparing performance of:
ResizeObserver vs ResizeObserver polyfill
Created:
3 years ago
by:
Registered User
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
ResizeObserver
ResizeObserver polyfill
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Browser/OS:
Chrome 135 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=597329" width="100%" height="500px"></iframe>
ResizeObserver
24K/s
ResizeObserver polyfill
22K/s
View exact numbers
Test name
Executions per second
✓
ResizeObserver
24,243 Ops/sec
ResizeObserver polyfill
22,307 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
resize event listener vs resizeObserver
ResizeObserver vs matchMedia 3x
Comments
Confirm delete:
Do you really want to delete benchmark?