Иногда возникает случай использования, когда вам нужно, чтобы стиль или макет элемента на странице обновлялся в этот самый момент, а не дожидаться, когда браузер найдет для этого наиболее эффективное время. Одним из примеров может быть моя предыдущая статья Анимация в CSS.
Но как это сделать?
Чтобы было ясно, это то, что нужно использовать с осторожностью. Плохой код, который неоднократно вызывает такое поведение браузера, очень часто является источником проблем с производительностью. Посмотрите на пример отличия здесь.
Благодаря исчерпывающему списку, составленному Полом Айришем, легко просто выбрать одну из функций DOM и использовать ее в качестве триггера для нашего рестайлинга или перекомпоновки:
Рестайл:
// forces style recalculation only
const forceStyleRecalculation = () => {
return document.scrollingElement;
}
Reflow (макет):
// forces restyle and reflow
const forceReflow = () => {
return document.body.offsetWidth;
}
Список также содержит ссылку на дополнительную информацию, такую как влияние на производительность, как избежать проблем, список триггеров CSS для этого поведения и многое другое, так что читайте :)
