Влияние многих переменных CSS на производительность

Question

Это довольно общий вопрос.

Кто-нибудь знает о влиянии на производительность использования многих переменных CSS в данном документе? Кто-нибудь делал какие-либо тесты?

Влияет ли элемент, с которым вы связываете переменную, на производительность? Не ухудшается ли производительность, скажем, при назначении всех переменных :root, чем при присвоении их отдельным блокам стиля, где они могут использоваться только?

Answer 1

Да, есть тесты, которые были сделаны.По сути, вы применяете изменения CSS с помощью JavaScript и измеряете производительность.

Вы захотите узнать о области видимости ваших переменных CSS и количестве затронутых элементов.По мере того, как эти числа увеличиваются, увеличивается и ваше время прорисовки.

На эту тему есть удобная статья на https://lisilinhart.info/posts/css-variables-performance/

TL; DR помните о пересчетах стилей, так как переменные CSSнаследуются - изменение переменной у родителя может повлиять на многих детей, предпочитающих использовать отдельные классы для элементов, чтобы упростить вычисления стилей для браузера. calc () имеет хорошую производительность с переменными, но все еще имеет проблемы с поддержкой браузера с определенными единицами измерения, такими как deg или msпредпочитаю использовать setProperty вместо встроенных стилей для установки CSS-переменных в JavaScript

И еще одна цитата:

С помощью Javascript переменная --bg была впервые установлена ​​на родительском элементе .container.элемент, что привело к довольно большой продолжительности 76 мс.Затем такая же переменная была установлена ​​для первого дочернего файла .el, который длился всего около 1,9 мс.Таким образом, чем больше дочерних элементов имеет родительский элемент, использующий эту переменную, тем дороже становится установка переменной CSS для этого элемента.