

In other words, using window.resize is often wasteful because it informs us of every viewport size change, not just when an element’s size actually changes.

This can easily lead to performance problems due to the large amount of triggered event. Up until this point, we’ve had to rely on the global window.resize event to listen for resize events and check if certain elements have changed size.

The most frequent reason for an element’s size to change is when the viewport is resized or the device’s direction changes between portrait and landscape. It allows for elements to be notified when their size changes. Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API.
