Свойства CSS и их влияние на производительность?

Question

мы все знаем, что свойства CSS влияют на производительность, но я не могу найти ответ - все свойства имеют одинаковое влияние?

Answer 1

Есть определенные свойства в CSS, которые влияют на производительность браузера больше, чем другие ... border-radius и box-shadow являются хорошими примерами этого.

В дополнение к свойствам способ определения значений для свойств также может влиять на производительность.Например, использование calc() начнет влиять на производительность при чрезмерном использовании.

Есть некоторые селекторы, которые более дорогие в использовании, чем селектор потомков.

Я бы порекомендовал прочитать эта статья Джона Отандера .Это немного старый, но все еще в силе.И внизу есть множество ссылок для дальнейшего чтения.Но это даст вам несколько точных замечаний относительно эффективности собственности.

Answer 2

Нигде не существует официального заявления о том, что «Не все свойства оказывают одинаковое влияние на производительность», но существует такое огромное разнообразие свойств с множеством эффектов, что немыслимо , что отрисовывает тень блокабудет иметь такое же влияние на производительность, что и загрузка и рисование фонового изображения, рендеринг гибкого макета или изменение шрифта.

Но если вы хотите проверить это самостоятельно, вы можете создать тысячу div элементов, датьу всех них очень большая тень от квадрата и прокрутка страницы.Затем поменяйте тень на рамке для рамки, отступов, фонового изображения и т. Д. И посмотрите, будет ли страница прокручиваться лучше.Вам может потребоваться отключить аппаратное ускорение в вашем любимом браузере, прежде чем вы почувствуете существенную разницу.Но это, безусловно, есть.