QUESTION: Что такое Resize Observer?

The Resize Observer API in JavaScript is a modern standard for tracking changes to the sizes of elements on a web page. Before this API appeared, developers had to attach heavy and inefficient handlers to the window resize event, even though the size of absolutely any block could change independently of the browser window, for example, when opening drop-down menus or dynamically loading content.

Creating a size observer is implemented via the new ResizeObserver(callback) constructor. Inside the callback function, the developer receives an array of change objects. Each such object contains the entry.contentRect property, which stores up-to-date numeric data on the width, height, and coordinates of the element, and these measurements take internal padding into account.

To start the observation process, simply call the observer.observe(element, options) method and pass the target DOM node to it. This approach works exceptionally smoothly and efficiently because size changes are processed asynchronously in the browser's special rendering loop. This is an ideal solution for creating responsive interface components, adaptive canvas charts, or complex tables that need to instantly rebuild their internal layout when the dimensions of the parent container change.