Создает ли нагрузку css градиент?

Question

[romashov83]

Вот такой дизайн прислали. Выглядит красиво, но есть мнение, что будет создавать нагрузку (на процессор). Так ли это? И если да, то как это проверить? То есть, нужно как-то визуально показать, что нагрузка действительно есть и от такой реализации лучше отказаться.

body {background: #f9eff6; background: linear-gradient(-45deg, #00ffff, #00ff9d, #f200ff, #ff0000) no-repeat center center fixed; background-size: 500% 500%; -webkit-animation: Gradient 50s ease infinite; -moz-animation: Gradient 50s ease infinite; animation: Gradient 50s ease infinite;}
@keyframes Gradient {0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%}}

Comments

[Одиночка Айс]

Это проблема браузеров, а не ваша с дизайнером.

Answer 1

[Ivan Bogachev]

В теории:

В процессе работы анимации со свойством background-position постоянно происходит полный цикл всего, что только может происходить при отображении страницы:



Иными словами нагрузка есть, да.

На практике:

На среднем железе один такой цикл занимает меньше 1ms. Это не много. Это не то, что будет создавать "ощущение тормозов" у пользователя. Если поделить 1000ms на 60fps, то получится где-то ~16.5ms на кадр. Соответственно, если бы анимация занимала к примеру 30ms, то мы бы глазами видели лаг. Если анимация занимает ~10-12ms, то у устройства еще остаются ресурсы на работу остальных скриптов, общение с сервером и.т.д. и мы видим шустро работающую страницу. А в вашем случае она занимает меньше 1ms, так что нет каких-то весомых причин отказываться от нее. Не занимайтесь преждевременной оптимизацией.