ResizeObserver — отслеживание размеров элементов на уровне разметки!

Размер DOM-элемента не всегда связан с размером окна браузера. Компонент может менять свои размеры из-за изменения родительского контейнера, перестроения flex или grid-разметки, открытия боковой панели или изменения структуры интерфейса.

window.resize отслеживает только изменение размеров viewport и не позволяет узнать, что изменился конкретный элемент.
window.addEventListener(
'resize',
() => {
updateLayout();
}
);

Например, открытие sidebar может уменьшить рабочую область компонента с 1100px до 900px, при этом размер окна останется прежним.

Событие resize не сработает, хотя компоненту уже нужен перерасчёт. Для отслеживания размеров конкретных DOM-элементов используется ResizeObserver:
const observer = new ResizeObserver(([entry]) => {
const width = entry.contentRect.width;

renderChart(width);
});

observer.observe(chart);

Компонент получает информацию о собственном размере и не зависит от того, где он находится: внутри модального окна, боковой панели или полноэкранного блока.

При работе с ResizeObserver важно учитывать возможность цикла изменений. Если внутри обработчика менять размер наблюдаемого элемента, это может вызвать повторное изменение и новый вызов наблюдателя:
const observer = new ResizeObserver(([entry]) => {
const width = entry.contentRect.width;

element.style.width = `${width + 10}px`;
});

Браузер может обнаружить такой цикл и ограничить дальнейшую доставку уведомлений.

Обычно измерение и изменение интерфейса разделяют, например перенося обновление DOM в следующий кадр отрисовки:
const observer = new ResizeObserver(([entry]) => {
const width = entry.contentRect.width;

requestAnimationFrame(() => {
updateUI(width);
});
});

requestAnimationFrame помогает разделить чтение размеров и изменение DOM, но не исправляет ситуацию, когда логика постоянно изменяет размеры наблюдаемого элемента.

Наблюдатель должен иметь собственный жизненный цикл. Создание новых экземпляров при каждом обновлении компонента приводит к лишним подпискам:
const observer = new ResizeObserver(callback);

observer.observe(element);

// очистка
observer.disconnect();

Для современных браузеров доступны более точные способы измерения через contentBoxSize и borderBoxSize:
const observer = new ResizeObserver(([entry]) => {
const width =
entry.borderBoxSize?.[0]?.inlineSize ??
entry.borderBoxSize?.inlineSize ??
entry.contentRect.width;

updateLayout(width);
});

borderBoxSize учитывает padding и border, поэтому подходит для случаев, когда расчёты должны соответствовать фактическому размеру блока.

ResizeObserver не заменяет CSS-механизмы адаптивности. Если изменение касается только отображения, лучше использовать container queries:
@container (min-width: 600px) {
.card {
display: grid;
}
}

ResizeObserver нужен там, где размер элемента влияет на логику приложения: перерасчёт графиков, размеры canvas, виртуализация списков и другие операции, требующие данных о размере DOM-элемента в js.

🔥 ResizeObserver позволяет синхронизировать логику приложения с реальными размерами элементов и является более точным инструментом для компонентной архитектуры, чем отслеживание только изменения окна.

📣 Code Ready | #практика