Какой лучший способ слежки за resize window (или body) через JS?

Question

[Андрей Чирков]

Прочитал много разных способов, но так и не понял какой же способ лучший в 2021 году.

Как следить за ресайзом окна через js?
Есть window resize, matchMedia, addeventlistener, ResizeObserver.

Как постоянно следить за размером body или за конкретным блоком? например нужно перестроить типичную галерею картинок на малых экранах

Answer 1

[Виталий Першин]

Если надо следить за window, то resize вполне подходящий вариант, а чтобы слишком часто не выполнять сложные вычисления, отложить выполнение функции через setTimeout примерно так:

Answer 2

[Aetae]

Очевидно: в зависимости от задачи.
resize - realtime пропорциональная зависимость от размеров всего окна.
matchMedia - единоразовые изменения по breakpoint'ам.
ResizeObserver - слежение за конкретным элементом (который может и не менять размеров при изменении окна\media).

Comments

[Андрей Чирков]

Все таки не очевидно...

В вопросе написано какой ЛУЧШИЙ способ!
Вы написали методы которые я и так перечислил.

Можно интервалами в секунду проверять matchMedia,
а можно window.addEventListener('resize', function(event) {
// повесить слушателя и пусть висит всегда
}),
а может выгодно ResizeObserver повесить на body?

Лучше addEventListener('resize') общий или в 15, например, местах на блоках отдельные ResizeObserver?

Виталий Першин выше написал хороший ответ, но вдруг у кого то есть еще мысли.

[Aetae]

Андрей Чирков, для каждой ситуации "лучший" - свой, что тут непонятного?
Я даже написал в каких случаях надо что использовать.

Что выиграет - один глобальный resize и ручная обработка или множество ResizeObserver? Надо тестировать конкретный случай. Но, в случае множества меняющихся элементов, я бы всё равно использовал множество ResizeObserver, потому что это проще и удобнее поддерживать, и только если бы это стало узким местом смотрел бы иные варианты.

А проверять интервалами matchMedia точно не нужно, ты делаешь это неправильно. На matchMedia можно повесить слушателя onchange(раньше addListener) и он будет срабатывать только на изменение.