Как оценить влияние динамических единиц измерения на рендеринг в css (rem, vw)?

Question

[reivunxx]

Вопрос на первый взгляд странный, но все таки
Предположим имеем такой формат записи стилей для начертаний текста. Таких классов много, и на каждый есть 2-4 вариации через @media

@media (min-width: 375px) {
    .h-3-caps {
        font-size: calc(1.00573rem + .50891vw);
    }
}

Немного понимая принцип обхода браузером таблицы стилей и применения их на html-теги, я могу сказать что такой формат записи это медленнее чем использовать значения в px
Но хотелось бы разобраться в нюансах:
Во-первых, самый основной вопрос - насколько это ощутимо? Скажем, полностью отказавшись от такой записи в пользу упрощения, можно ли будет ожидать заметный буст? Я слышал, что гугл вообще удалил оценку оптимальности написания стилей из оценки быстродействия в lighthouse ввиду слишком малого импакта, но в тоже время видел несколько статей где люди сравнивая свойства, примененные на 100 тысяч элементов, получали какой-то буст в производительности.
Во-вторых, что именно в этой конструкции вызывает самые тяжелые вычисления - calc, rem, vw, или факт того, что это плавающие значения с большим количеством знаков после запятой?

В целом буду рад любому комментарию, вопрос носит больше дискуссионно-познавательный характер

Comments

[imko]

В девтулзах есть инструмент оценки времени ну грубо говоря всего) Попробуй замени на статичные значения и измерь https://css-tricks.com/the-truth-about-css-selecto...

[Полина]

Можно потестировать влияние каждого компанента изолированно:

1. Убрать плавающие точки
   
2. Убрать calc, заменить вычисления на фиксированные числа в px
   
3. Изолировать использование vw: сравните производительность с использованием vw при изменении размера окна и без него
   
4. Оцените влияние rem, меняя корневой размер шрифта
   

Я ставлю на то, что наибольшее влияние окажет изменение размера окна при использовании calc() с vw потому что потребуется пересчет всех элементов.
Влияние на производительность от вычисления rem с плавающей точкой будет незначительным. Вряд ли у вас в действительности часто будет изменяться размер шрифта корневого элемента в рамках одной сессии.