> Что такое Resize Observer и для чего он нужен? (JavaScript)

Короткий ответ

Resize Observer - это API браузера, который позволяет отслеживать изменения размеров HTML-элемента. В отличие от window resize event, он работает на уровне конкретного элемента, а не всего окна. Основное назначение - выполнение кастомной логики при изменении ширины, высоты или положения элемента, например, для адаптивной верстки, ресайза графиков или обновления layout.

Подробное объяснение

Resize Observer является частью Observer API и предоставляет асинхронный способ реагировать на изменения размеров элемента. Он создает экземпляр ResizeObserver, которому передается callback-функция. Эта функция вызывается каждый раз, когда размеры наблюдаемого элемента меняются - будь то из-за CSS, JavaScript, изменения контента или ресайза окна. В callback передается массив объектов ResizeObserverEntry, каждый из которых содержит информацию об элементе (target), его новые размеры (contentRect) и границы (borderBoxSize, contentBoxSize, devicePixelContentBoxSize).

Основное отличие от window resize - Resize Observer не зависит от ресайза окна. Он срабатывает при любом изменении размеров элемента, включая динамическое добавление контента, изменение CSS-свойств (например, width, height, padding) или смену класса. Это делает его идеальным для компонентов, которые должны адаптироваться к своему контейнеру, а не к окну браузера.

Resize Observer также оптимизирован для производительности: он не создает бесконечных циклов (как, например, polling через setInterval) и автоматически обрабатывает множественные изменения в одном фрейме. Однако стоит помнить, что он не поддерживается в старых браузерах (IE11) и требует полифилла.

На практике

Resize Observer часто используется в следующих сценариях:

• Адаптивные компоненты: изменение поведения или стилей в зависимости от ширины контейнера (например, переключение между горизонтальным и вертикальным меню).
• Графики и диаграммы: перерисовка canvas или SVG при изменении размеров родительского элемента.
• Виртуальные списки: обновление количества отображаемых элементов при ресайзе контейнера.
• Кастомные layout-алгоритмы: например, masonry grid или динамическое позиционирование элементов.
• Отслеживание изменений в iframe или вложенных компонентах.

Важно: Resize Observer не предназначен для анимаций или частых изменений стилей внутри callback - это может привести к performance issues. Лучше использовать его для обновления состояния или вызова debounced функций.

Пример кода

JAVASCRIPT
// Создаем наблюдатель
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { target, contentRect } = entry;
    console.log(`Элемент ${target.id} изменил размер: ${contentRect.width} x ${contentRect.height}`);
    
    // Пример: адаптивное поведение
    if (contentRect.width < 600) {
      target.classList.add('compact');
    } else {
      target.classList.remove('compact');
    }
  }
});

// Начинаем наблюдение за элементом
const myElement = document.getElementById('resizable-box');
observer.observe(myElement);

// Позже можно остановить наблюдение
// observer.unobserve(myElement);
// observer.disconnect();

Как отвечать на собеседовании

Начни с краткого определения: "Resize Observer - это API для отслеживания изменений размеров конкретного элемента". Затем объясни, чем он отличается от window resize - акцент на элемент, а не на окно. Приведи пример использования (например, адаптация графика). Если спросят про производительность, упомяни, что он работает асинхронно и не вызывает reflow в каждом кадре. Для уровня junior достаточно показать понимание базовой механики и одного-двух практических сценариев.

Что проверяет интервьюер

• Понимание разницы между Resize Observer и window resize event.
• Знание, что Resize Observer работает на уровне DOM-элемента, а не окна.
• Умение объяснить, когда его использовать (адаптивные компоненты, графики, layout).
• Осведомленность о производительности и ограничениях (не для анимаций, нужен полифилл для старых браузеров).
• Базовое знание синтаксиса: создание, observe, unobserve, disconnect.

Типичные ошибки

• Путать с MutationObserver (отслеживает изменения DOM, а не размеров).
• Использовать Resize Observer для ресайза окна - это избыточно, достаточно window.addEventListener('resize').
• Забывать отключать observer при удалении элемента из DOM (утечка памяти).
• Пытаться изменять стили элемента внутри callback без debounce - это может вызвать бесконечный цикл ресайзов.
• Не учитывать, что contentRect включает padding, но не border и scrollbar.