Как постоянно измерять высоту блока при resize?

Question

[mrzgt]

При resize постоянно нужно измерять высоту нескольких блоков. Подскажите сильно ли это будет влиять на производительность и может есть готовое решение

Comments

[Moses Fender]

Она и так измеряется. Любое изменение размера осуществляется установкой boundRect, соответственно изменяются clientRect, offset размеры, и т.д.

[Moses Fender]

Кстати, немного оффтоп: следует всегда помнить, что такие свойства как margin и border тоже влияют на размер и положение блока внутри его parent'а.

[Владислав]

mrzgt вы имеете в виду, как организовать обработчик события onresize не для body, а для конкретного элемента?

Answer 1

[Виталий Яковенко]

https://developer.mozilla.org/en-US/docs/Web/API/R...

Answer 2

[Владислав]

Есть хорошее решение, но для современных браузеров ResizeSensor. Базируется на CSS Element Queries. Но стоит упомянуть, что любой вызов типа `element.offsetHeight` вызывает rendering страницы, что может влиять на производительность прорисовки в браузере. Чтобы оптимизировать это дело, можно воспользоваться will-change, но нужно быть аккуратным и использовать это свойство с умом.

UPD (14-03-2019 14:16): подробнее о вызовах, которые вызывают reflow страницы можно почитать здесь