Почему установка textContent вызывает перекомпоновку?

У меня есть простая утилита countUp/Down, которая использует requestAnimationFrame для установки textContent определенного DOM. Удивительно, но каждый раз, когда я обновляю контент, браузер запускает перекомпоновку. Есть ли способ избежать этого?

В CodePen есть простая демонстрация requestAnimationFrame с использованием инструмента производительности Chrome dev tool, вы можете видеть, что за каждым обратным вызовом следует перекомпоновка (макет) Результат производительности

Насколько мне известно, установка textContent не должна вызывать пересчет стиля. Я также пытался придать элементу фиксированный размер, но это не помогло.


browser performance reflow requestanimationframe
person Stvyu    schedule 11.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В отличие от некоторых методов, он не запускает перекомпоновку синхронно, но когда произойдет следующее рисование, браузеру все равно придется пересчитывать макет, поскольку изменение textContent могло изменить макет страницы.

Единственный способ избежать перекомпоновки, о котором я могу думать, — это отобразить этот текст на «холсте».

person Kaiido    schedule 11.03.2021
comment
Спасибо, я не знал, что не всякая перекомпоновка необходима для повышения производительности. Играя с холстом, он действительно не запускал перекомпоновку, однако время, необходимое для завершения события Animation Frame, на самом деле не уменьшилось. Поэтому я думаю, что в моем случае использования безопасно допустить перекомпоновку. - person Stvyu; 11.03.2021