Как Clamp влияет на производительность, если его везде использовать?

Question

[BloomingBurden]

.container {
        align-items: center;
        min-height: #{fluid(65px, 128px, 1440px, 2560px)};
        padding-top: #{fluid(13px, 28px, 1440px, 2560px)};
        padding-bottom: #{fluid(13px, 28px, 1440px, 2560px)};
   }

На выходе
.header__container {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: clamp(4.0625rem, 5.625vw + -1rem, 8rem);
  padding-top: clamp(0.8125rem, 1.3392857143vw + -0.3928571429rem, 1.75rem);
  padding-bottom: clamp(0.8125rem, 1.3392857143vw + -0.3928571429rem, 1.75rem);
}

Не так давно начал использовать clamp во всех своих проектах в таком виде. Я его использую везде и всегда. Но сегодня узнал, что в целом это может влиять на производительность . когда страница перерисовывается, а это происходит в любой момент, когда у нас есть JS Анимации. Хотел бы узнать, правда ли это от профессионалов своего дела.

Comments

[Ankhena]

-ms-flex-align: center; в сочетании с clamp выглядит потрясающе.

[BloomingBurden]

Ankhena, я использую свои общие стили, как в тайлвинд. Например d-flex - display: flex и тд. Поэтому здесь остался только align-items)

[Ankhena]

BloomingBurden, при чем тут тайлвинд и его классы?

[BloomingBurden]

Ankhena, просто ваше утверждение никак не связано с моим вопросом. Я вам пытаюсь пояснить, что ваша насмешка относительно clamp + align-item безосновательна и глупа.

[Ankhena]

BloomingBurden,
Я поняла, что вы ничего не поняли, да ещё так не поняли, что даже позволили себе огрызаться.
Ну, давайте разжую.
Насмешка не над align-items, а над -ms- для флексов.
Т.е. вы считаете, что в ваше целевую аудиторию входит достаточное количество пользователей 10-11 ИЕ.
А потом пишете, что всегда и везде используете clamp, который и в старом Edge-то не работает, не то что 10-11 ИЕ.
Вот это действительно и глупо и нецелесообразно.

просто ваше утверждение никак не связано с моим вопросом

Вижу, что вы задали свой первый вопрос тут. Приглядитесь к интерфейсу. Есть поля для ответов, а есть для комментариев. Своё удивление от увиденного я написала как раз таки в комментариях. В надежде, что вы скажете что-то типа "ха-ха, действительно, забыл исправить автопрефиксер".
Но отсюда следует и другое: не нужно показывать в вопросе свойства с префиксами, если вопрос не касается конкретно их или свойства без вендорного префикса в принципе не существует.

Про clamp и по теме вопроса
Раз уж стала писать простыню.
Вряд ли кто-то за вас пойдет измерять нагрузку конкретно в вашем проекте. То, что большое количество вычислений увеличивает нагрузку на браузер, вроде очевидно. С другой стороны, браузер всё равно пересчитывает всё в px. И просто vw или vw с ограничением в px, ничего особо не прибавят. А вот вычисление calc внутри, это уже интереснее. Но конкретную прибавку, опять таки смотрите самостоятельно.

По поводу использования clamp всюду, в частности, у вас в паддингах. Очень вряд ли или редко вертикальные паддинги блока зависят от ширины вьюпорта. Скорее от размера самого блока или шрифта. Используя соответствующие единицы измерения и/или кастомные свойства, можно упростить логику, увеличить читаемость, сократить код, сократить нагрузку (на всех и на браузер в том числе).
Аналогично и с другими свойствами.
Минимальная высота от 4 до 8 rem намекает на сомнительное использование rem. Точнее, на то, что само понятие rem убито чем-то вроде 1rem = 10px, т.е. перестало зависеть от настроек пользователя.
Дальше логика снова куда-то поехала. Тот способ адаптива через rem, некоторое время назад, действительно, имел некоторую популярность, к счастью, не очень большую. Но с вводом того же clamp, min, max и новых единиц измерения от вьюпорта, от контейнера, кастомок, стал не нужен. Я бы рекомендовала развязать всю эту кашу.

[BloomingBurden]

Ankhena, спасибо, я вас понял. Извините, что не разобравшись. огрызнулся. У меня просто голова уже болит от clamp, rem, em. Хочется отзывчивую верстку. Clamp меня в этом спасал, но на последнем тяжелом сайте почувствовал просадку в производительности. Сейчас перешел на em с rem

[Ankhena]

BloomingBurden, отлично, разбирайтесь! Это очень интересные темы.
Почитайте про единицы от контейнера, если ещё не читали.

Answer 1

[catch-a-chalk]

Привет! Если вкратце, то использование математических функций типа clamp(), calc(), sin() и других действительно нагружают браузер.

Если чуть подробнее, то затрачивается больше ресурсов при рендеринге, а при большом количестве стилей с функциями гарантированно будет доп. нагрузка, плюс легче запутаться при отладке. Короче, есть ли смысл заморачиваться с выбором между удобством и производительностью? @media и лайтхаус в помощь :)