[ITEM 5] QUESTION: Что такое Resize Observer?

Інтерфейс Resize Observer в JavaScript є сучасним стандартом для відстеження змін розмірів елементів на веб-сторінці. До появи цього API розробникам доводилося вішати важкі та неефективні обробники на подію зміни розміру вікна window resize, хоча змінюватися міг розмір абсолютно будь-якого блоку незалежно від вікна браузера, наприклад, при відкритті випадаючих меню або динамічному підвантаженні контенту.

Створення спостерігача за розмірами реалізується через конструктор new ResizeObserver(callback). Всередині функції зворотного виклику розробник отримує масив об'єктів змін. Кожен такий об'єкт містить властивість entry.contentRect, всередині якої зберігаються актуальні числові дані про ширину, висоту і координати елемента, причому ці вимірювання враховують внутрішні відступи padding.

Щоб запустити процес спостереження, достатньо викликати метод observer.observe(element, options) і передати йому цільовий DOM-вузол. Цей підхід працює виключно плавно і ефективно, оскільки зміни розмірів обробляються асинхронно в спеціальному циклі візуалізації браузера. Це ідеальне рішення для створення чуйних компонентів інтерфейсу, адаптивних графіків на canvas або складних таблиць, яким потрібно миттєво перебудовувати свою внутрішню верстку при зміні габаритів батьківського контейнера.