Что такое Resize Observer?

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

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

Чтобы запустить процесс наблюдения, достаточно вызвать метод observer.observe(element, options) и передать ему целевой DOM-узел. Данный подход работает исключительно плавно и эффективно, так как изменения размеров обрабатываются асинхронно в специальном цикле визуализации браузера. Это идеальное решение для создания отзывчивых компонентов интерфейса, адаптивных графиков на canvas или сложных таблиц, которым требуется моментально перестраивать свою внутреннюю верстку при изменении габаритов родительского контейнера.